How to Use SureCart 3.0 with Avada Builder

In SureCart 3.0 we need to do a couple more things to keep compatible with Avada builder.

Before moving forward, make sure that you have installed Avada Builder on your website. 

How to Setup Shop Page

• Go to Pages list. Find the Shop Page and Edit it or Just Go to Shop Page from SureCart Sidebar.

• On the right side, Page Attributes section, select Template as SureCart.

• Now on the editor, remove the [sc_product_list] block and then re-add that element using Code Block.

• Find the Code Block

• Add a small CSS if Product images don’t look expected height –

.sc-product-item-link .wp-block-cover {
	min-height: 400px !important; /* any minimum height */
}

• Save the post and visit frontend Shop Page and everything should work as expected for the shop page.

How to Setup Product Detail Page

• In Product edit page, Select template layout as SureCart Layout

• Save the Product and Your Product page should work as expected.
• Add the below script at WP-Code or any other header-footer script inject plugin.

add_action( 'after_setup_theme', function() {
    $active_theme = wp_get_theme();

    if ( 'Avada' === $active_theme->get( 'Name' ) ) {
        // Run the wp_interactivity_config function
        wp_interactivity_config( 'core/router', array( 'clientNavigationDisabled' => true ) );

        // Inject custom css for avada specific.
        add_action( 'wp_head', function() {
            echo '<style>
                .fusion-layout-column:has(.wp-block-surecart-product-list) {
                    display: block !important;
                }
                .wp-block-surecart-product-list-filter-tags {
                    width: auto !important;
                }
            </style>';
        });
    }
});

add_action( 'wp_enqueue_scripts', 'sc_enqueue_avada_block_styles', 999999 ); // must be greater than 999.
function sc_enqueue_avada_block_styles() {
	wp_enqueue_style( 'global-styles' );
	wp_enqueue_style( 'wp-block-library' );
	wp_enqueue_style( 'wp-block-library-theme' );
	wp_enqueue_style( 'classic-theme-styles' );
}

Fixing Missing Product Thumbnails in the Cart

If you notice that product thumbnails are not displaying in the cart, follow these steps to resolve the issue:

1. Navigate to Avada > Performance in your WordPress dashboard.
2. Click on the Optimization tab.
3. Locate the WordPress Big Image Size Threshold setting and increase the value (e.g., set it to 2500 or higher).
4. Change the Image Lazy Loading setting from Avada to WordPress.

After making these changes, your product thumbnails should display correctly in the cart.

If you have any more questions or face any issues, please feel free to reach out to our support team. We’re always here to assist.