Home Forums WoodMart support forum CSS Add to Cart Landing Page

CSS Add to Cart Landing Page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #649696

    kruajeng
    Participant

    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.
    #649699

    kruajeng
    Participant

    In the search field
    class=”product woocommerce add_to_cart_inline ”

    #649808

    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,

    #649861

    kruajeng
    Participant

    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

    #649926

    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,

    #649981

    kruajeng
    Participant

    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.
Viewing 6 posts - 1 through 6 (of 6 total)