Oxygen WooCommerce Cart Button

This topic contains 12 replies, has 2 voices, and was last updated by  Sebastian 10 months, 3 weeks ago.

Author Posts

Brendon

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

Example


Sebastian

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

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

deseleced


Sebastian

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

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
Unselected

Selected
Selected

Deselected (would like to remove)
Deselected

This is the code
Code


Sebastian

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

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
Selector1

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.
Selector2

Any ideas?

Thanks again


Sebastian

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

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

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.
No Option

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.
Deselects

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

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

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

You’re welcome Brendon, I’m really glad you stuck with it and were able to accomplish your goal.

You must login or register to reply to this topic.