Oxygen WooCommerce Cart Button

This topic has 12 replies, 2 voices, and was last updated 4 years, 4 months ago by Sebastian.

Author	Posts

Brendon November 29, 2020 at 2:14 am	Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date. Hi Is it possible with Microthemer to change the default layout and arrows of the quality arrows on the add to cart button? I rather have a +- either side of the number. Thanks
Sebastian November 29, 2020 at 12:42 pm	I’m pretty sure that will be possible. If you can send me a link to your page I can give you the precise CSS.
Brendon November 30, 2020 at 6:04 am	Thanks (sent you link in email) Also on the same page if you select a colour or size then deselect it, it leaves behind an unnecessary box shadow. I’ve tried targeting it but can’t seem to turn it off, any ideas? I’ve been targeting: #-product-cart-button-193-37 .variable-item Thanks
Sebastian November 30, 2020 at 10:31 am	Hey Brendon, Regarding the input arrows, I made a mistake there. Now that I’ve inspected the page I see that the arrows are part of the native number input. The arrows can not be styled with CSS in a straight forward way. Some JavaScript would be need too. If this is an important requirement for your project, I can provide you with a workaround based on this stackoverflow solution. It would need to be adapted slightly so that the JavaScript function isn’t nested inside the input HTML, which I think would be tricky when using a premade Oxygen-WooCommerce component. Regarding the size and color fields, I wasn’t getting the shadow when deselecting the items. Only on hover, which seems appropriate. Could you let me know what browser you are using? Thanks, Sebastian
Brendon November 30, 2020 at 6:43 pm	Ok thanks, don’t worry about the arrows if it’s complicated. Regarding the size and colour fields. I’m using Chrome 87.0.4280.67 and also tried in Safari. I get 3 states. Unselected Selected Deselected (would like to remove) This is the code
Sebastian December 1, 2020 at 2:44 pm	Oh yes, I was clicking other options to deselect – I see what you mean if you click the active item it to deselect. You can override that selector by targeting the item in the :focus state using the following selector: `#-product-cart-button-193-37 .button-variable-item:focus` You could copy your current selector and then manually add the :focus bit. Or you could create a new selector via the targeting options, and then enable :focus via the CSS modifiers option (to the right of the selector label field).
Brendon December 1, 2020 at 8:19 pm	Thanks Sebastian, Sorry to keep asking but determined to fix this, unfortunately I couldn’t get that to work. Using: #-product-cart-button-193-37 .button-variable-item:focus I was unable to change 3px to 1px because it would effect all states I then tried just focusing on one item but I still could not change 3px to 1px because as soon as I clicked the box to change it, it would change the state. Any ideas? Thanks again
Sebastian December 2, 2020 at 10:08 am	Oh OK, good point. To limit the change only to when the element has not been selected you could use: `#-product-cart-button-193-37 .button-variable-item:focus:not(.selected)` And if you want to allow the shadow to remain thicker when the user is still hovering their mouse over the deselected item, you can use this: `#-product-cart-button-193-37 .button-variable-item:focus:not(.selected):not(:hover)` In plain English, the last selector says: “Target the button when it is in the focus state, but not when the button has been selected or the user is hovering over it“. Does that help / make sense? Thanks, Sebastian
Sebastian December 2, 2020 at 10:21 am	Oh and regarding the issue with clicking the item and changing the state, you can select element without clicking them in Microthemer. Expand the advanced targeting options with the HTML pane, and then click the line of HTML for the button. This technique is also useful for form select elements, which cannot be clicked without showing the menu (instead of being selected by MT). https://screencast-o-matic.com/watch/cb12jFX9vm That may be useful for future reference. Cheers, Sebastian
Brendon December 2, 2020 at 11:27 pm	Hi thanks again, Thought I had it but not quite unfortunately, still doesn’t work, but it’s helping me learn Microthemer. 1. It’s not targeting without selecting/deselecting its changing the setting (once targeted) in microthemer without causing it to deselect. If you click anything/anywhere on screen it deselects so you can’t change the setting. 2. If I use ‘.selected’ I get a microthemer error #-product-cart-button-193-37 .button-variable-item:focus:not(.selected) but without the dot in selected its ok I think. 3. If I use: #-product-cart-button-193-37 .button-variable-item:focus:not(selected) then in the Microthemer shadow interface it says mixed so I can’t adjust the individual setting, breaks it if I try. 4. If I select just one item then it shows the correct setting (3px not mixed) but same problem I can’t change it, click anywhere/anything on screen and its gone. 5. If I try and change the setting in the default unselected state it breaks it. Hopefully that all makes sense, appreciate the help.
Sebastian December 3, 2020 at 10:17 am	So there are issues with Microthemer’s normal click to select method because we are dealing with a :focus state. Did you know that you can manually adjust the code for your existing Microthemer selectors via the selectors menu at the top left, or by clicking the name of the current selector in the top toolbar? Try changing the selector code to: `#-product-cart-button-193-37 .button-variable-item:focus:not(.selected):not(:hover)` (You will need to click the ‘Save selector’ button) And then change the shadow width. Does it look right? Also, could you clarify what you mean by a Microthemer error when you tried using a dot with .selected? If you mean it tells you that selector doesn’t target anything, that could be a limitation of JavaScript assessing the validity of CSS selectors that tap into a dynamic state (e.g. :focus). In other words, a false positive error. Or simply because focus gets removed when you move to Microthemer, and so it correctly reports that your selector isn’t relevant to any elements on the page. I’ve created a video to show you how the selectors I suggested should work: http://somup.com/cYle662IJz I hope that helps! I’m here if you’re still stuck. Thanks, Sebastian
Brendon December 3, 2020 at 7:45 pm	Ok finally got it! Thanks for the video, sure is a fiddly little change. Realised what I was doing wrong now. I added the code manually in the end because I still couldn’t get it to work… then I noticed I wasn’t adding all the box shadow settings, thought I only needed to adjust the px setting. Thanks again for the help.
Sebastian December 4, 2020 at 9:51 am	You’re welcome Brendon, I’m really glad you stuck with it and were able to accomplish your goal.