Product single page add to cart and quantity button not aligned and few more

Hi @Mario :),

For #1 and #2, please find and remove this custom CSS:

.single-product .single_variation_wrap {
    display: flex;
    justify-content: center;
}

After that find this custom CSS:

.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    flex-wrap: wrap !important;
    width: 60%;
}

And change to:

.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    width: 100%;
}

For #3, please add this custom CSS:

.single-product p.price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
}

For #4, this is how it looks on our end: https://prnt.sc/DQTS_kFJuAAH

To make the button add to cart full-width, please also add this custom CSS:

@media (max-width: 480px){
    .single-product button.single_add_to_cart_button.button {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

For #5, that’s the lazy loading widget featured of XStore theme to reduce the loading time of your website.

Best Regards,
8Theme’s Team

Hi @Mario :),

We would like to check your website but this admin account is not working anymore.

Could you please double check?

Thank you!

Dear Mario,

We hope this message finds you well.

We would like to inform you that your custom CSS codes have been integrated under the “Add To Cart Form” element > Custom CSS. You can review the placement here: https://prnt.sc/6U1sCXYa35aw.

Could you kindly access the Single Product Template via Elementor and update the custom CSS as required?

Additionally, regarding item #5, we would greatly appreciate your assistance in creating a video tutorial. Your expertise would be invaluable in this endeavor.

Thank you for your attention and cooperation.

Best regards,
The 8Theme Team

Hi @Mario :),

We mean we’re still not clear on the issue #5. Could you please share a video/screenshot?

Thank you!

Hi @Mario :),

The loading time on mobile sometimes is slower than desktop version depends on the size of the images.

We suggest you to enable the lazy loading under XStore > Theme Options > Speed Optimization >
Image Loading Type > select Lazy:

https://prnt.sc/QgVLIq4C8CG0

Best regards,
The 8Theme Team

Hi @Mario :),

1. As we said in the previous replies, some widgets are using the AJAX loading so they need time to load, do you want to remove this feature completely?

2. We’ve fixed this issue for you. There were some br tags that cause the spacing issue.

3. Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

@media (max-width: 600px){
    .single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
        width: 100%;
    }
}

4. It’s because of your custom CSS codes:

.btn.small.black, .btn.medium.black, .btn.big.black, .before-checkout-form .button, .etheme-above-checkout-form .button, .checkout-button, .shipping-calculator-form .button, .single_add_to_cart_button.button, .single_add_to_cart_button.button:focus, .single_add_to_cart_button.button.disabled, .single_add_to_cart_button.button.disabled:hover, .et-quick-view-wrapper .single_add_to_cart_button.button, .et-quick-view-wrapper .single_add_to_cart_button.button:focus, .et-quick-view-wrapper .single_add_to_cart_button.button.disabled, .et-quick-view-wrapper .single_add_to_cart_button.button.disabled:hover, form.login .button, form.register .button, form.register .button.woocommerce-Button, form.lost_reset_password .button, .woocommerce-EditAccountForm .woocommerce-Button, .empty-cart-block .btn, .empty-wishlist-block .btn, .empty-compare-block .btn, .empty-category-block .btn, .woocommerce-mini-cart__empty-message .btn, .form-submit input[type="submit"], #commentform input[type="button"], .form-submit input[type="submit"]:focus, .my_account_orders .view, .et-quick-view-wrapper .product_type_variable, .et-quick-view-wrapper .product_type_variation, .coupon input[type="submit"], .widget_search button, .widget_product_search button, .woocommerce-product-search button, form.wpcf7-form .wpcf7-submit:not(.active), .woocommerce table.wishlist_table td.product-add-to-cart a, .wcmp-quick-info-wrapper form input[type=submit], .product_list_widget .buttons a, .et-wishlist-widget .wishlist-dropdown .buttons .btn-view-wishlist, .btn-checkout, .mini-cart-buttons .button:not(.btn-checkout), .mini-cart-buttons a, .form-row.place-order .button, .search-full-width form .btn, .xstore-wishlist-action .button, .xstore-compare-button .button, .form-actions .add-all-products, .form-actions .compare-more-products, .form-actions .xstore-wishlist-actions, .form-actions .xstore-compare-actions, .et-cookies-popup-wrapper .cookies-button, body .etheme-checkout-page-next-step, .etheme-checkout-page-steps-footer #place_order, body .etheme-checkout-page-previous-step, .etheme-elementor-cart-checkout-page-coupon .button, .etheme-elementor-cart-checkout-page-login-form .button {
    font-weight: 400;
    text-transform: capitalize;
    border-style: none;
    margin-top: 30px;
}

We’ve removed the margin-top: 30px; and everything looks good.

5. How can we access this? This is how it looks now: https://prnt.sc/m4J3cUC6zgQv

6. Please double check the responsive & margin settings of your sections & inner sections, maybe there are some margin. We also suggest you to convert all the old sections to containers: https://elementor.com/help/convert-existing-sections-to-containers/.

Best regards,
The 8Theme Team

Hi @Mario :),

For #1, please add the following code under functions.php file locates in your child theme:

add_filter('etheme_ajaxify_elementor_widget', '__return_false');
add_filter('etheme_ajaxify_lazyload_widget', '__return_false');
add_filter('etheme_ajaxify_script', '__return_false');
add_filter('et_ajax_widgets', '__return_false');

After that try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-etheme]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-product-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-product-etheme]>.elementor-widget-container {
    opacity: 1;
    visibility: visible;
}
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before {
    display: none;
}

Best regards,
The 8Theme Team