Customize the “add to cart” button

Hello,

As you can see in the image, the writing “add to cart” is poorly centered. How can I customize this?

I searched everywhere and couldn’t find how to configure this.

Thank you in advance for your help,

Here is the screenshot

Attachments:

You must be logged in to view attached files.

No, here is the good screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL I will check and give you a custom css code.

Best Regards

Here is the link

Thank you

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:

.wd-add-btn-replace .add-to-cart-loop span {
    font-size: 12px;
    justify-content: left !important;
}

Best Regards.

Thanks, It works !

Now the problem has moved with this code. Products visible on the home page have a non-centered add to cart button.

As you can see in the following link.

Attachments:

You must be logged in to view attached files.

And on mobile, here’s how it displays with the provided code

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for desktop:

.archive-pages, .wd-add-btn-replace .add-to-cart-loop span {
   font-size: 12px;
    justify-content: left !important;
}

Best Regards.

Hello

It’s always the same whether it’s on mobile or on products visible on the home page on a computer.

Attachments:

You must be logged in to view attached files.

For cell phones, the add to cart button appears like this on both the home and store pages

Hello,

Can you please share the WP admin login details of your site so I will check and give you the possible solution.

Best Regards.

Hello,

Here is the information:

Hello,

Sorry to say your admin login URL Redirect to the account page after login to your site So, i am unable to login your site. Please give me the site access so i will check and give you a possible solution.

Best Regards.

Hello,

please find the requested information

Hello,

Sorry it is the same. Navigate to User section > All Users > Edit User which you have made me and enable the option Show Toolbar when viewing site

Best Regards.

You should now be able to access it

Thank you for your help

Hello,

I have added the following code in Theme Settings > Custom CSS on your site. Check back your site and check the issue.

.archive-pages, .wd-add-btn-replace .add-to-cart-loop span {
   font-size: 12px !important;
    justify-content: center !important;
}

And on the mobile device it is showing fine. If you want to change the products styles, Navigate to Theme Settings > Product Archive > Products Styles > Choose one of the hover effects for products

Best Regards

Hello

Thank you for your help

In mobile version, I can’t change this despite the configuration change in theme settings as you indicated in your message

The green button is not present on the entire width of the product, it is not aesthetic

Attachments:

You must be logged in to view attached files.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile section:

.wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop {
   width: 100% !important;
}
.wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .product_type_simple:before {
    padding-inline-end: 110px !important;
}

Best Regards.

Hello,
There is always a slight delay on PC as you can see.
Can you fix this?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Can you please record a short video for better understanding to reproduce the issue on your site.

Best Regards.

[Author]

Posts