Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 3, 2021 at 3:38 pm #1331473
    Alex PS

    Dear Kreisi Team,

    Have been struggling the whole day to resolve the issue. Have also checked WordPress and Woocommerce solutions around the internet to be able to custom CSS the “Add to cart” buttons on single product pages but to no avail.

    It seems like Enfold is blocking any custom classes for buttons or I can’t find the right classes for the custom CSS. You are my last resort.

    The page in question:

    Pearlight Homeset

    Customization to be applied for the “Add to cart” button:
    .postid-9557 .av-woo-purchase-button div .main_color .button {
    border-color: #ebebeb;
    background-color: #fff !important;
    color: #5690e8 !important;
    font-weight: normal !important;
    padding: 8px 30px 8px !important;
    font-size: 16px !important;
    border-bottom: solid 2px #ebebeb !important;
    border-right: solid 2px #ebebeb !important;
    border-left: solid 2px #ebebeb !important;
    border-top: solid 2px #ebebeb !important;
    border-radius: 50px !important;
    }
    .postid-9557 .av-woo-purchase-button div .main_color .button:hover {
    border-color: #ebebeb;
    background-color: #f499c0 !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 8px 30px 8px !important;
    font-size: 16px !important;
    border-bottom: solid 2px #f499c0 !important;
    border-right: solid 2px #f499c0 !important;
    border-left: solid 2px #f499c0 !important;
    border-top: solid 2px #f499c0 !important;
    border-radius: 50px !important;
    }

    Really looking forward to your reply and hope for your help!

    Best,
    Alex

    December 3, 2021 at 4:10 pm #1331482
    Alex PS

    Just to clarify, I need to add the changes only to “Add to cart” button, not to all buttons on the page. So I need the CSS to be applied to a single element on the page..

    December 3, 2021 at 8:48 pm #1331507
    Alex PS

    Hi there,

    Just so you know the problem was resolved :/

    I was able to do that with:
    /* **
    ADD TO CART BUTTON
    ** */
    /* price color & size */
    .postid-9557 .av-woo-purchase-button .price span,
    .postid-9595 .av-woo-purchase-button .price span,
    .postid-9628 .av-woo-purchase-button .price span,
    .postid-9653 .av-woo-purchase-button .price span {
    font-size: 35px !important;
    color: #50b848 !important;
    }
    /* add to cart button */
    #top .button.single_add_to_cart_button {
    color: #5690e8;
    background: #fff;
    border: solid 2px #ebebeb;
    border-radius: 35px;
    }
    #top .button.single_add_to_cart_button:hover {
    color: #fff;
    background: #f499c0;
    border: solid 2px #f499c0;
    border-radius: 35px;
    }

    All other technical buttons:
    /* **
    ACTION BUTTONS
    APPLY COUPON
    UPDATE CART
    EDIT ORDER
    ** */
    .actions .button:disabled {
    color: #5690e8 !important;
    background: #fff !important;
    border: solid 2px #ebebeb !important;
    border-radius: 35px !important;
    }
    .actions .button {
    color: #5690e8 !important;
    background: #fff !important;
    border: solid 2px #ebebeb !important;
    border-radius: 35px !important;
    }
    .actions .button:hover {
    color: #fff !important;
    background: #f499c0 !important;
    border: solid 2px #f499c0 !important;
    border-radius: 35px !important;
    }
    /* **
    PROCEED TO CHECKOUT
    ** */
    .cart-collaterals .cart_totals a.button.alt {
    color: #5690e8 !important;
    background: #fff !important;
    border: solid 2px #ebebeb !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }
    .cart-collaterals .cart_totals a.button.alt:hover {
    color: #fff !important;
    background: #f499c0 !important;
    border: solid 2px #f499c0 !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }
    /* **
    VIEW CART (After Add to cart)
    ** */
    #top .avia-wc-notice-box.main_color .woocommerce-message a.button {
    color: #5690e8 !important;
    background: #fff !important;
    border: solid 2px #ebebeb !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }
    #top .avia-wc-notice-box.main_color .woocommerce-message a.button:hover {
    color: #fff !important;
    background: #f499c0 !important;
    border: solid 2px #f499c0 !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }
    /* **
    RETURN TO SHOP
    ** */
    a.button.wc-backward {
    color: #5690e8 !important;
    background: #fff !important;
    border: solid 2px #ebebeb !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }
    a.button.wc-backward:hover {
    color: #fff !important;
    background: #f499c0 !important;
    border: solid 2px #f499c0 !important;
    border-radius: 35px !important;
    margin-bottom: 10px;
    }

    And a not working product table with tax and shipping information being shown without a margin on the left.
    /* **
    SHOP VAT + SHIPPING
    ** */
    /* left margin */
    .page-id-9546 .product p.wc-gzd-additional-info,
    .page-id-10570 .product p.wc-gzd-additional-info,
    .page-id-9547 .product p.wc-gzd-additional-info,
    .postid-9557 .product p.wc-gzd-additional-info,
    .postid-9595 .product p.wc-gzd-additional-info,
    .postid-9628 .product p.wc-gzd-additional-info,
    .postid-9653 .product p.wc-gzd-additional-info {
    margin-left: 15px;
    }
    /* plus shipping costs */
    .page-id-9546 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .page-id-10570 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .page-id-9547 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .postid-9557 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .postid-9595 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .postid-9628 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info,
    .postid-9653 ul.products .product p.shipping-costs-info, ul.products .product p.tax-info {
    display: flex;
    flex-direction: column;
    }

    Hope that helps to someone.

    Best,
    Alex

    December 4, 2021 at 5:25 am #1331515
    Rikard

    Hi Alex,

    Great, I’m glad that you found a solution for your problem, and thanks for sharing it. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    December 4, 2021 at 4:02 pm #1331546
    Alex PS

    Hi Rikard,

    I do have another question unfortunately.

    I need Product grid and other carousels with products to show product description under the price and before the tax field. I added a product description in product page but cannot make the site to show that short description.

    You can see the product grid under the “Product catalogue” header.
    https://www.pearlsmile.com/shop/

    Thank you very much in advance!

    Best,
    Alex

    December 5, 2021 at 12:16 am #1331579
    Mike

    Hi,
    Try adding this code to the end of your functions.php file in Appearance ▸ Editor:
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_single_excerpt', 5);

    Best regards,
    Mike

    December 6, 2021 at 6:22 pm #1331747
    Alex PS

    Hi Mike,

    Like a charm! Thank a lot for your help :)

    Best,
    Alex

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘"Add to cart" button CSS customization’ is closed to new replies.