Before you ask please READ THIS

slider for woo commerce shop page

in FatMoon Posts: 68
Hi,
How can I put one of my sliders (revolutionary sliders) on the top of my woocommerce shop page? I tried to add it in block editor but it was displayed atop of the product tiles with fixed width instead of atop of both the sidebar and product tiles.

Comments

  • AirAir
    Posts: 10,639
    Hey :-)

    Do use WPBakery or default WordPress block editor(gutenberg) to create your shop page?

    With kind regards.
  • Posts: 68
    Normally, I use WPBakery to create a website.
    When I realized WPBakery cannot edit Woocommerce template pages, I started experimenting with block editor.
  • AirAir
    Posts: 10,639
    Hey:-)

    The theme doesn't have support for block editor, except for basic integration, so you will not be able to use full-width feature that is available for some blocks.

    However, the Revolution slider had options to force the full width of the window, even if a container is smaller. See here "Force full width" https://wpexplorer-themes.com/total/docs/full-screen-revslider/

    With kind regards.
  • Posts: 68
    Hey Air,
    How do add a revolutionary slider to the top of my shop page?
    (Not using block editor)
  • AirAir
    Posts: 10,639
    Hey :-)

    As shop page is special type of page, generated more from WooCommerce then pages it is not possible, without overriding or adding with via action and some custom code.

    If you will add shortcode into editor to the shop page, it will be displayed above the products, however I am not sure if this is what you want.image

    With kind regards.
    screenshot-192.168.1.2-2021.05.31-17_02_25.png
    758 x 584 - 14K
  • Posts: 68
    Hey Air,
    This is exactly what i needed. I added a shortcode. However, I need to force full width, the side cart is blocking it from full width. See image
    image (11).png
    1919 x 1080 - 989K
  • AirAir
    Posts: 10,639
    Hey :-)

    Have you tried forcing slider to full width via its options, like here https://themes.zone/docs/how-to-change-revolution-slider-layout-from-full-width-to-boxed/ ?

    With kind regards.
  • Posts: 68
    Hey,
    Yes, currently it's on full-width via a revolutionary slider.
  • AirAir
    Posts: 10,639
    Hey :-)

    Ok, so we have to go a different route.

    Instead of adding shortcode to the content, lets hijack the title bar for the shop.

    Best would be for you to use a child theme for the theme, and in functions.php file in the child theme, add such a code
    function apollo13framework_title_bar( $called_position = 'outside', $title = '', $subtitle = '') {
        $page_type = apollo13framework_what_page_type_is_it();
    
        if($page_type['shop'] && !$page_type['product'] ){
    //swap your shortcode below
            echo do_shortcode('[rev_slider alias="blend-mode"][/rev_slider]');
        }else{
            echo apollo13framework_get_title_bar( $called_position, $title, $subtitle);
        }
    }
    Just please swap to your shortcode in the above code.

    It will add revo slider above the content and the sidebar.

    About using the child theme https://rifetheme.com/apollo13-framework/docs/installation-updating/installing-child-theme/

    With kind regards.
  • Posts: 68
    Hey,
    I was able to follow your instructions. I've updated the child theme accordingly (with my shortcode) but didn't see any changes on the front end. see image
    Thanks.
    image (12).png
    3600 x 1080 - 1M
  • Posts: 68
    Hey, nvmd. It WORKED!
  • Posts: 68
    This is Great!, Can i have a similar code for adding a slider to all my product pages?
  • AirAir
    Posts: 10,639
    Great to hear!

    Would you like a different slider or the same?

    If the same, then remove this part of code && !$page_type['product'] .

    With kind regards.
  • Posts: 68
    Hi, for a different slider
  • AirAir
    Posts: 10,639
    Sure :-)

    Please use below code instead, and swap your shortcodes :-)
    function apollo13framework_title_bar( $called_position = 'outside', $title = '', $subtitle = '') {
        $page_type = apollo13framework_what_page_type_is_it();
    
        //swap your shortcode below for the shop
        if($page_type['shop'] && !$page_type['product'] ){
            echo do_shortcode('[rev_slider alias="blend-mode"][/rev_slider]');
        }
        //swap your shortcode below for the single product
        elseif($page_type['product'] ){
            echo do_shortcode('[rev_slider alias="blend-mode"][/rev_slider]');
        }
        else{
            echo apollo13framework_get_title_bar( $called_position, $title, $subtitle);
        }
    }
    Hope that helps.

    With kind regards.
  • Posts: 68
    Hey, This worked but I got a little hiccup. The check-out and cart pages display the shop slider and display it twice. see below.
    image (15).png
    3600 x 1080 - 2M
  • AirAir
    Posts: 10,639
    Good catch :-)

    OK, let's try a different approach. Replace old code with following one
    function apollo13framework_title_bar( $called_position = 'outside', $title = '', $subtitle = '') {
        //swap your shortcode below for the shop and product categories
        if(apollo13framework_is_woocommerce_activated() && (is_shop() || is_product_taxonomy() )){
            echo do_shortcode('[rev_slider alias="blend-mode"][/rev_slider]');
        }
        //swap your shortcode below for the single product
        elseif(apollo13framework_is_woocommerce_activated() && is_product() ){
            echo do_shortcode('[rev_slider alias="photography-carousel2"][/rev_slider]');
        }
        else{
            echo apollo13framework_get_title_bar( $called_position, $title, $subtitle);
        }
    }
    It will add a slider for the main shop and shop categories.
    It will also add a slider for single product pages.

    With kind regards.
  • Posts: 68
    That worked like a charmy charm!
    Cheers!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion