Shop page – Add to Cart button

Hi there,

Issue 1: On our shop page desktop version – our add to cart button is small and our personalise button is big. Could you please let me know how to make these buttons the same size. They were previously, only recently this issue has come up.
See image: https://prnt.sc/SQwbLKGtHiII

We want it to look like this: https://prnt.sc/gcjQe-YK6dee

Issue 2: Could you please let me know how to make product price in the cart to be pink – like image below.
See image for reference: https://prnt.sc/gcjQe-YK6dee.

Thanks

Hello,

1. Most likely, you can adjust your personalized button via the settings of the plugin so it will be with similar sizes as the default “Add to cart”.

2. Are you meant the cart widget or the Cart page? The thing is that I cannot find the link to the Cart page.

I await your response.

Kind Regards

1. No, the problem is that the ‘add to cart’ button has gone smaller. The personalise button is a good size but the theme add to cart button went small. Usually you give me a code to fix this and put in CSS. Maybe the previous css doesn’t work now because this use to look okay.

2. I’m referencing the product price to be colour pink for the cart. Please look at the image I sent for reference so you can understand what I’m talking about. – both widget and cart page. It’s just changing the product price colour.

Hello,

1. Try to use the below code to make the “Add to cart” button bigger, enter it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.product-grid-item.wd-hover-standard .add-to-cart-loop span {
    padding: 12px 60px;
}

2. As for the color, some plugins override the pink color, and the access that you have provided seems to be wrong.

https://monosnap.com/file/WjsILQqrdkymL5SBtl2X59htMTrXfS

Please update the access and confirm the permission for plugins deactivation.

Kind Regards

That code doesn’t work.

These were the code sent previously.

.product-grid-item.wd-hover-standard .add-to-cart-loop span {
padding: 12px 60px;
}

.product-grid-item .wd-add-btn.wd-add-btn-replace .button.product_type_simple {
width: 180px;
height: 60px;
}

None works now.

I don’t give permission to disable plugins as it might ruin some site settings.

Clearly your coding for the theme has changed as couple of weeks ago – the ‘add to cart’ button in the shop page works fine – using this code.

.product-grid-item .wd-add-btn.wd-add-btn-replace .button.product_type_simple {
width: 180px;
height: 60px;
}

Which is still in our custom CSS

Hello,

Could you please update the access to the admin dashboard so I can investigate the issue with the code?

https://monosnap.com/file/np3JINer9TedYxvURWwIGBUVHB8vTz

I await your response.

Kind Regards

You’re entering the wrong username. That’s why. Please don’t disable any plugin. I’m sure its the code that’s the issue. It was previously displaying the correct size before – same size as our ‘personalise’ button but only recently changed. Which has happened before

Hello,

You haven’t closed the bracket in the last custom code of the “Global Custom CSS” area so due to this mistake the other code worked not properly. I have fixed it:

https://monosnap.com/file/TtlvOWGV2N7WdsOSEg4v5GOcjWLmTU

As a result, your own code for the button started to work:

https://monosnap.com/file/qh84dNbxnbvGWqfM4eo5b9weWwCI3k

So I commented it for activated the code that I have provided:

https://monosnap.com/file/7LeLwnt5ejVaxfDj6vl0zzDEwOb9yI

At the end, my code started to work: https://monosnap.com/file/3m1iVo1rVt1xtEk4EyxRqMl9BmJxB2

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards

Hi

Thanks for that.

How do I change the width of the ‘add to cart’ button to match the size of the ‘personalise’ button. I tried changing the width on the code but it doesn’t do anything.

thanks

Hello,

You can try to replace the padding property with your width and height that are adjusted per your needs.

https://monosnap.com/file/BxXH56C0u2eeL5bGCMIWCwgma6VkgE

Let me know about your results.

Kind Regards

[Author]

Posts