Woocommerce mini-cart missing "button" class on front end

[designerken]

Adding the mini-cart element in Cornerstone has the following classes for the “view cart” and “checkout” buttons:
<a href="#" class="button wc-forward wp-element-button">View cart</a>
<a href="#" class="button checkout wc-forward wp-element-button">Checkout</a>

This allows for the styling in Cornerstone settings to style it. But on the front end they are missing the class button so they render differently from the preview.

On the frontend the classes are as follows:

<a href="#" class="wc-forward wp-element-button x-anchor">
<a href="#" class="checkout wc-forward wp-element-button x-anchor">

Also in Cornerstone the mini-cart element ‘buttons’ tab doesn’t have an option for the background colors, but you can change the text colors. However, any changes here does not affect the preview, only the front end.

[ruenel]

Hello @designerken,

I have tested the mini-cart on my local testing server and I cannot replicate your issue. This is what I have:

I have a hunch that on your site, you are having the issue because you may have inserted a broken HTML code. We would love to check it if you can share to us the URL of your site.

Best Regards.

[designerken]

@ruenel
I have buttons but the classes assigned on them are different from The backend preview with cornerstone and on the front end of the site (see code above). <a> elements are missing the .button class on the front end.

Also try changing any of the button elements in in cornerstone they will not change the preview. Also there is no button background color in Cornerstone to change the buttons color. This is on two separate sites. All running current versions of plugins/themes.

Code: notice the missing classes.

Cornerstone (no button background color):

Frontend nothing like the preview:

[ruenel]

Hello @designerken,

You added an inline element CSS:

You may need to remove this:

$el .widget_shopping_cart_content p.buttons .x-anchor:not(.checkout) {
  background-color: transparent;
}

$el .widget_shopping_cart_content .buttons .x-anchor:not(.checkout) .x-anchor-text-primary{
  color: var(--xtt-brandprimary);
}

And update this code to include the "View Cart " button:

$el .widget_shopping_cart_content .buttons .checkout.x-anchor {
  padding: calc(25px - 2px) 45px;
  background-color: var(--xtt-brandprimary);
}

$el .widget_shopping_cart_content .buttons .checkout.x-anchor:hover {
  background-color: var(--xtt-brandsecondary);
}

into this:

$el .widget_shopping_cart_content .buttons .wc-forward.x-anchor,
$el .widget_shopping_cart_content .buttons .checkout.x-anchor {
  padding: calc(25px - 2px) 45px;
  background-color: var(--xtt-brandprimary);
}

$el .widget_shopping_cart_content .buttons .wc-forward.x-anchor:hover,
$el .widget_shopping_cart_content .buttons .checkout.x-anchor:hover {
  background-color: var(--xtt-brandsecondary);
}

Best Regards.

[designerken]

@ruenel

I guess I am not clear in explaining. I have the code there because that is how I want it to look.

What I am stating is that if you look at the raw code there is NO CLASS on the front end with .button on that <a> tag. Yet it has it in Cornerstone. Also there is no option for the background color to be changed, but you can change out the text color in the button. You DO not see live preview updated when making those changes either.

Test this on your local site and you will see this to be true.

[ruenel]

Hello @designerken,

I believe that this is a bug in the latest release. I will report this to our issue tracker. In the meantime, you may use wp-element-button class instead.

Best Regards.

[designerken]

@ruenel

Ok glad that it’s a bug and will be addressed.

[ruenel]

No problem @designerken.