slider for woo commerce shop page

wmoarsi

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.

Air

Hey :-)

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

With kind regards.

wmoarsi

Normally, I use WPBakery to create a website.
When I realized WPBakery cannot edit Woocommerce template pages, I started experimenting with block editor.

Air

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.

wmoarsi

Hey Air,
How do add a revolutionary slider to the top of my shop page?
(Not using block editor)

Air

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.

With kind regards.

wmoarsi

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

Air

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.

wmoarsi

Hey,
Yes, currently it's on full-width via a revolutionary slider.

Air

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.

wmoarsi

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.

wmoarsi

Hey, nvmd. It WORKED!

wmoarsi

This is Great!, Can i have a similar code for adding a slider to all my product pages?

Air

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.

wmoarsi

Hi, for a different slider

Air

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.

wmoarsi

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.

Air

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.

wmoarsi

That worked like a charmy charm!
Cheers!