Jack Richardson

Hello @Bas Kling,

We have improved the previous snippet for you to use it on non-builder Archives products and added it as a new snippet: https://prnt.sc/PrKMR1Ch1R61.
You can further adjust this snippet according to your requirements (we have prepared a basic structure for you):

add_action('woocommerce_shop_loop', function() {
	global $paged, $page;
    global $woocommerce_loop;

	$banner_shortcode = false;
    $position_banner = 6; 

    if ( $paged <= 1 && is_product_category() ) {
    	if ( is_product_category('essentials-collectie') ) {
    		$position_banner = 3;
    		$banner_shortcode = '[block id="32016"]'; 
    	}
    	if ( is_product_category('leren-lingerie') ) {
    		$position_banner = 2;
    		$banner_shortcode = '[block id="12250"]'; 
    	}
        if ( $banner_shortcode && (($woocommerce_loop['loop'] / 2) == $position_banner) ) {
        	$classes = array('shop-loop-banner product'); // product class is for grid layout 
        	if ( !wc_get_loop_prop( 'etheme_default_elementor_products_widget', false ) && function_exists('etheme_get_product_class') )
    			$classes[] = etheme_get_product_class( $woocommerce_loop['columns'] );
        	echo '<div class="'.implode(' ', $classes).'">';
	        	echo do_shortcode($banner_shortcode);
	        	echo '<span class="screen-reader-text">Shop banner</span>';
        	echo '</div>';
        }
    }
}, 9999);

The category slug used in the conditions can be found in your Dashboard under Products → Categories: https://prnt.sc/PyoxldAjeQ_D.

Frontend examples:
https://prnt.sc/4BUZVMPQvvYh
https://prnt.sc/NQ_z9AEjQXeM

At this time, we have temporarily disabled the snippet until you set the correct static blocks and categories.
Please note that each static block can cover only one column, so it is not possible to achieve the layout shown in examples 2 and 3. However, you may try adding custom CSS to make your static block stretch (https://prnt.sc/7cNsoMCQXUCE):

.products-loop .shop-loop-banner.product {  
    width: 100%;  
}

Please note that we do not provide additional customization. We have made an exception in your case. If you wish to further enhance this snippet, it will require submitting an additional customization request. We believe that our current solution will be useful for you in the existing version of the code snippet.

Thank you for your understanding and for respecting our support policy.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Mahi,

We are unable to verify the editor of your header due to certain protection settings. Upon inspecting it in the browser, we found that the issue may be related to the configuration of your containers and logo image. Please check your private messages for more details. If you have any other specific questions, please, clearify them in details.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @islam,

Thank you for your message. We are glad to hear that disabling the PJAX option resolved the issue. Our development team is aware of this matter and will review it for possible improvements in future updates. We recommend keeping your theme and plugins up to date to benefit from the latest fixes and enhancements.

Best Regards,
The 8Theme’s Team

Hello @islam,

Unfortunately, we were unable to access the video on your Google Drive. We kindly ask you to upload it to a file-sharing service such as https://fex.net/ and share the link in your reply.

Additionally, as a possible solution, we have temporarily activated the “Disable Pjax pagination” option in XStore Theme Options -> Speed Optimization: https://prnt.sc/zZxldufICsCD. Please clear your cache and check whether this resolves the main issue. If the problem persists, we would appreciate it if you could provide a video demonstrating the issue so that we can replicate it on our side.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Vladimir7809,

Please check now. We have fixed the issue related to the custom CSS snippet (https://prnt.sc/5yrb_WHqm2Tu). The problem was caused by a conflict between certain bootstrap styles loaded from some plugins on your website (https://prnt.sc/2yWK43iyGXWD), which were overriding the column width styles for the Related Posts section.

You can see the frontend result here: https://prnt.sc/r2I5O6havour

Please remember to clear your browser cache before checking.

Additionally, we kindly ask you to create separate topics for your questions instead of combining them into a single thread.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Bas Kling,

Could you please provide us with more details? Would you like to add a static block inside the product loops (shop and category archives)? Where exactly should this block be placed? Are you using the XStore Archive Products Builder or the default template for the product archive page?

Please also provide us with temporary wp-admin access so that we can assist you further if needed. (This option is not available in the Theme Options, but you can try the following solution added in your child-theme/functions.php if you are using the builder-based template.)

add_action('etheme_product_grid_list_after_product_item', function() {
    global $woocommerce_loop;
    $repeat_banner_each_x_product = 5; // Display banner after every 5th products
    if (($woocommerce_loop['loop'] % $repeat_banner_each_x_product) == 0) {
        if (is_shop())
            echo 'Custom text after every 5th product item only on the shop page';
        elseif (is_product_category())
            echo '' . do_shortcode('[block id="968"]') . '';
    }
});

OR

add_action('etheme_product_grid_list_after_product_item', function() {

    global $paged, $page;
    global $woocommerce_loop;

    $repeat_banner_each_x_product_3 = 3; // after ONLY 3rd product the banner be shown

    if ( $paged <= 1 ) {
        if ( ($woocommerce_loop['loop'] == $repeat_banner_each_x_product_3) ) {
            if ( is_shop() ) { // only for shop page 
                echo '<div>'.do_shortcode('[block id="968"]').'</div>';
            }
            // or 
            // if ( is_shop() || is_product_category() ) { // shop or category archive
            //     echo '<div>'.do_shortcode('[block id="968"]').'</div>';
            // }
        }
    }

});

Static block [block id=”968″] is copied in backend settings -> Static blocks ( https://prnt.sc/ezfe7EGG_UI8)
Frontend example: https://prnt.sc/xk7XtcjQWtqc (shop), https://prnt.sc/WgRfdPgT0sPR (category banner)

Best regards,
Jack Richardson
The 8Theme’s Team

Dear @youn ess,

You can achieve this by using either a plugin or a custom code solution to display the checkout form directly on your product pages. Please find the options below:

Using a Plugin:
Consider installing a WooCommerce plugin such as “WooCommerce One Page Checkout” (https://woocommerce.com/document/woocommerce-one-page-checkout/) or “WooCommerce Direct Checkout” (not sure but you can contact to their support about their features). These plugins allow you to add checkout fields directly to your product pages, simplifying the purchasing process for your customers.

Using Custom Code:
If you are comfortable with coding, you can modify your xstore-child/functions.php file to include the checkout form on the product page. Please note that design, styles, and scripts may not be properly loaded when using a custom snippet (see example: https://prnt.sc/gwuR1-_NjtBt).
Here is a basic example of the code:

add_action('woocommerce_after_add_to_cart_button', 'etheme_child_custom_checkout_form_to_product_page');

function etheme_child_custom_checkout_form_to_product_page() {
    if (is_product()) {
        echo do_shortcode('[woocommerce_checkout]');
    }
}

XStore child-theme documentation: https://www.8theme.com/documentation/xstore/theme-installation/child-theme/

Please note that this request is more closely related to WooCommerce plugin functionality rather than the XStore theme. Therefore, we recommend contacting WooCommerce support for further assistance:

– For paid WooCommerce products: https://woocommerce.com/my-account/create-a-ticket/
– For the free version: https://wordpress.org/support/plugin/woocommerce/

If you have any other questions, please, submit your questions in separated topics.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Gprx,

You can try using our Single Post Builder (https://prnt.sc/eATKKGTcXVDB) based on Elementor (docs: https://www.8theme.com/documentation/xstore/xstore-builders/), which will make it easier for you to modify the margins of your containers. Alternatively, if you prefer to continue using the default non-builder layout, you can add the following custom CSS:

@media (max-width: 767px) {
    .single-post:has(.etheme-elementor-header-overlap-mobile,.etheme-elementor-header-overlap-phone) .page-wrapper {
        padding-top: 190px;
    }
}

@media (min-width: -1) and (max-width:-1) {
    .single-post:has(.etheme-elementor-header-overlap-mobile_extra) .page-wrapper {
        padding-top: 230px;
    }
}

@media (min-width: 768px) and (max-width:1024px) {
    .single-post:has(.etheme-elementor-header-overlap-tablet) .page-wrapper {
        padding-top: 230px;
    }
}

@media (min-width: -1) and (max-width:-1) {
    .single-post:has(.etheme-elementor-header-overlap-laptop,.etheme-elementor-header-overlap-tablet_extra) .page-wrapper {
        padding-top: 230px;
    }
}

@media (min-width: 1025px) and (max-width:99999px) {
    .single-post:has(.etheme-elementor-header-overlap-desktop) .page-wrapper {
        padding-top: 250px;
    }
}

@media (min-width: -1) {
    .single-post:has(.etheme-elementor-header-overlap-widescreen) .page-wrapper {
        padding-top: 230px;
    }
}

However, based on the layout of your pages, we recommend disabling the Header Overlay option in your header as all of your pages have static content and then adjusting the top margin space on some of your pages as described here: https://www.8theme.com/topic/header-icon-not-working-dsdsddsdsdcsdasdasdas/#post-468648. If you need our assistance, we would be happy to help you with this.

Regarding your request about the carousel, you can try using the “Carousel Anything” widget. First, create a few static blocks or Elementor saved templates with your content, then select your items as shown here: https://prnt.sc/bweZdve4yl-R. You can also use custom content as demonstrated here: https://prnt.sc/T2o14GIqpY9k.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @islam,

After thoroughly reviewing the issue, we have found that the WooCommerce scripts for this widget do not fully support the RTL version. The widget functions same as in the default LTR version even with the default StoreFront theme: https://gyazo.com/623a0a358d51a019d2684af71fa974ef.

We recommend trying a different type of our Price filter widget by setting it to the Range type: https://prnt.sc/BGRAn2wbe9by (frontend example: https://prnt.sc/v2DS8Wb8tLUS). Alternatively, you may continue using the widget as it is, since there is no proper CSS-based solution to adjust the widget for RTL “rotation.”

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @mantolis,

Please check it now. The issue was caused by your custom height setting for this submenu: https://gyazo.com/0a44ceaf8fd856c6a4a9e315198de52f/

Best regards,
8Theme Team

Hello @Mirko,

Please check the “Image Loading Offset” option (https://prnt.sc/Vp3GUhItc0xb). Configuring this option correctly will help prevent content from shifting while scrolling, as images will begin loading when they are a specified number of pixels off-screen.

Please note that setting this value too high will cause all images within that offset range to load automatically.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Mirko,

Please note that the issue you are reporting is not directly related to our theme. The problem appears to be caused by broken images that are still cached in Google search results for your website. When customers attempt to open these pages or images, redirections may occur.

We recommend that you request reindexing of your website through the Google Search Console, clear all caches, or temporarily disable them on your website. After completing these steps, please check the issue again after a few days.

If you require assistance with the reindexing process, we kindly suggest contacting your hosting provider for guidance, as it may also be possible to initiate this action through your hosting tools.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Mirko,

As we can see from the details, you are already using the image optimization features of the LiteSpeed Cache plugin, including the conversion of images to the WebP format. However, based on the attached information, it appears that some images were migrated incorrectly. For example, the file https://wizard.rs/wp-content/uploads/2020/11/M-5-1-300×300.jpg.webp has an added WebP postfix instead of having the source correctly replaced.

We recommend try disabling our built-in image optimization by setting the value to “Default” (under the Speed Optimization section in Theme Options) and continuing to use the functionality provided by your LiteSpeed Cache plugin, as there seem to be some compatibility issues between our lazy loading feature and the plugin’s functionality.

Also, then activate image regeneration process to ensure all images are correctly updated.

If you have another suggestion, please clarify it in detail.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Gprx,

In the current Icon Box widget (the default widget from the Elementor plugin), you can add button text and set the URL as shown here: https://prnt.sc/38ehVKtwkEL_. If you would like to add a link to your description text, you need to include the link in the HTML content. For example, we modified the content as follows: WhatsApp (https://prnt.sc/l0ZI_URmZ47c).
<a href="https://xstore.8theme.com/">WhatsApp</a>
You can replace this link with your own custom URL.

Our Mobile Menu widget is designed with proper UI/UX principles, allowing you to add or remove items and select the element type from the dropdown list: https://prnt.sc/epG1BnX5F2P1. You can then configure each element according to the specific settings available in the accordion tab.

Please note that the header overlap setting is currently enabled for all devices in your header: https://prnt.sc/PSbuyNBRlsuU. This means the header overlaps the content on each page. You can disable this option to have a static header position (without overlapping): https://prnt.sc/BlMBZz4d8Etx. After disabling it, you may need to adjust the top spacing on some pages to ensure proper content alignment: https://prnt.sc/OdBU1d1B85Xb and https://prnt.sc/lGIraoCG8UIX.

If you wish to have the header overlay only on your homepage, you can create multiple header templates using the Conditions feature: https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Muffle,

You were unable to import this section because it contains the basic Accordion element, which had been previously disabled in the Elements Manager (https://prnt.sc/yvuGHl4znXjM). We have now enabled this widget, so please check again.

Please, note that such widget is displayed only if the Nested widgets feature is set to disable state (https://prnt.sc/bwv_402Q5Wlp)

For more information, you can refer to: https://elementor.com/help/element-manager/

Best regards,
Jack Richardson
The 8Theme’s Team