CSS Add to Cart Landing Page

Hello,
I’d like to make CSS ‘Add to Cart‘ button appearance consistent with the Landing Page

Attachments:

You must be logged in to view attached files.

In the search field
class=”product woocommerce add_to_cart_inline ”

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section. Change the value as per your requirements.

.dgwt-wcas-pd-addtc .add_to_cart_button, .dgwt-wcas-pd-addtc .add_to_cart_inline {
    background-color: #f2552c; 
    border-radius: 5px;
    min-height: 36px;
    width: 30px;
}

Best Regards,

Hello , Aizaz Imtiaz Awan

I want to insert this shopping cart font to replace the emoji

font-size: 20px;
transition: opacity .15sease, transform .25sease;
content: “\f123”;
font-family: “woodmart-font”;

Thank you

Hello,

It seems like you might be using a plugin to add this functionality. Could you please let me know which plugin you’re using? Also, if possible, kindly share the login details so I can take a closer look and assist you further.

Best Regards,

Hello,

.dgwt-wcas-pd-addtc .add_to_cart_button, .dgwt-wcas-pd-addtc .add_to_cart_inline {
background-color: #f2552c;
border-radius: 5px;
min-height: 36px;
width: 45px;
}

.dgwt-wcas-pd-addtc .add_to_cart_button:hover {
background-color: rgb(255, 145, 0) !important;
color: #fff;
cursor: pointer;
}

.add-to-cart-loop::before {
content: “\f123”;
font-family: “woodmart-font” !important;
transform: translateY(0);
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 20px;
transition: opacity .15sease, transform .25sease;
color: #fff;
}

.add-to-cart-loop span {
display: none;
}

.dgwt-wcas-details-space .added_to_cart {
font-size: 0 !important;
line-height: normal !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
overflow: hidden !important;
padding: 7px 12px 5px;
}

.dgwt-wcas-details-space .added_to_cart::before {
transform: translateY(0);
opacity: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 20px;
transition: opacity .15sease, transform .25sease;
content: “\f123”;
font-family: “woodmart-font” !important;
color: #fff !important;
padding: 0 !important;
margin-right: 0 !important;
}

I’ve already added the CSS code you recommended,
but there’s an issue with the animation during the product purchase loading process.

How should I fix it?

Attachments:

You must be logged in to view attached files.

Hi,

Sorry for the delayed response. Try using the following custom code to transfer the loader functionality to the plugin button.

.dgwt-wcas-pd-addtc .add-to-cart-loop:after {
    position: absolute;
    top: calc(50% - 9px);
    inset-inline-start: calc(50% - 9px);
    opacity: 0;
    transition: opacity .2s ease;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-left-color: #FFF;
    border-radius: 50%;
    vertical-align: middle;
    animation: wd-rotate 450ms infinite linear var(--wd-anim-state, paused);
}

.dgwt-wcas-pd-addtc .add-to-cart-loop.loading:before {
	opacity: 0;
}

.dgwt-wcas-pd-addtc .add-to-cart-loop.loading:after {
    opacity: 1;
    --wd-anim-state: running;
}

Kind Regards

Hello, Bogdan Donovan

Thank you very much
Close Topic

[Author]

Posts