Customizing ‘Add To Cart’ Section Elementor PRO Single Product Template

  • Hello,

    I’m currently using a CSS code to customize the add to cart section / size picker. The code is working correctly on the webbrowser now, but it is buggin on the phone.

    1. Can you move the block that is blue to the center and remove the arrows next to the number 1 (seen on firefox)?

    The website link
    https://stellagami.nl/product/the-squared-scribbled-short-top/

    Screenshot
    https://ibb.co/LpPcyfc

    2. Can you move the phone version of the block move to the center as well and fix the bug?

    Screenshot
    https://ibb.co/WxMYth3

    CURRENT CSS CODE
    .reset_variations {
    display: none !important;
    }

    .woocommerce div.product.elementor form.cart table.variations td {
    border: none;
    }

    .woocommerce .elementor-506 .elementor-element.elementor-element-e0c2cbf form.cart table.variations td.value:before {
    display:none;
    }
    .woocommerce div.product.elementor form.cart table.variations td.value {
    width: 40%;
    }
    .woocommerce div.product.elementor form.cart table.variations td.label {
    width: 0;
    }
    .woocommerce div.product form.cart .variations label {
    display: none;
    }

    • This topic was modified 5 years, 9 months ago by elvinm94.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello,

    Use the below CSS code and check it fixes the issue or not – 

    .woocommerce .elementor-506 .elementor-element.elementor-element-e0c2cbf form.cart .variations {
    justify-content: center;
    display: inline-grid;
    max-width: initial;
}
.woocommerce div.product.elementor form.cart table.variations td.value {
    width: 100%;
}
.woocommerce div.product.elementor .woocommerce-variation-add-to-cart .quantity input {
    -webkit-appearance: textfield;
}
    Thread Starter elvinm94

    (@elvinm94)

    Hello Amit,

    Only the sizing moved to the right

    Can you make the quantity and add to cart button centered aswell?

    Add this code also to make it center – 

    .woocommerce div.product.elementor .elementor-add-to-cart--align-left form.cart.variations_form .woocommerce-variation-add-to-cart, .woocommerce div.product.elementor .elementor-add-to-cart--align-left form.cart:not(.grouped_form):not(.variations_form) {
    justify-content: center;
}
    Thread Starter elvinm94

    (@elvinm94)

    Hello Amit,

    Thanks a lot so far :D.

    Can you maybe just adjust it so that the ‘- 1 +’ is next to the ‘M’ and leave the ‘add to cart’ under those two?

    Unfortunately, it is not possible. You need to write your own code to do it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing ‘Add To Cart’ Section Elementor PRO Single Product Template’ is closed to new replies.