#132030 Sidebar above single woocommerce product (mobile device)

Landing Forums Jupiter WordPress Theme Sidebar above single woocommerce product (mobile device)

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • Weber Joël

    Hey guys,

    Can you tel me how i can set a sidebar above a single woocommerce product page display for mobile device.

    I want to put the Search Advenced form on top of each single woocommerce product page.

    Actually, i have set it on a the Woocommerce Single widget area and he display on the left sidebar on desktop, but on mobile device this one is on the bottom page …

    Let me know what is possible to do.

    Thank you

    Nodari Support Team

    Hi Weber

    Somrhgin like this is possible:

    @media handheld, only screen and (max-width: 780px){
    .single-product #theme-page .theme-page-wrapper {
        display: flex;
        flex-direction: column;
    }
    .single-product #theme-page .theme-page-wrapper .theme-content {
        order: 2;
    }
    .single-product #theme-page .theme-page-wrapper #mk-sidebar {
        order: 1;
    }
    }

    Thanks

    Weber Joël

    I must have juste the Search Advanced over the product page.

    Can you look how can we do this ?

    If this can help you, the code i use for add the form were i want:

    [vc_row][vc_column width=”1/3″][/vc_column][vc_column width=”1/3″][wpb_aws_search_form placeholder=”Rechercher vos produits”][mk_padding_divider][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

    Can you also look for add space beetween menu and the form why he wasn’t visible.

    thank you

    Private
    Amir Rather Support Team
    This reply has been marked as private.
    Weber Joël

    Hey guys,

    On product page i would like to have the search Advanced woocommerce form. Can you tel me how it’s possible to put this form hover all products page ?

    thank you

    Alexander Hutsol Support Team

    Hello,

    You can override the single product page template and add the AW Search form shortcode to your needs https://wordpress.org/support/topic/add-shortcode-to-product-page-woocommerce/ via the child theme.

    How to install the child theme you can read here https://themes.artbees.net/docs/installing-theme-and-child-theme/

     

    Regards.

    Weber Joël

    I put you CSS code again and keep just the search form on the sidebard.

    On mobile device he doesn’t good display. I have to force to maintain the top of the page and see the search box

    Look attachment. You must add a space beetween top page product and the sidebar (just for mobile device)

    Amir Rather Support Team

    Hello There

    Please provide the URL of this page you have added the screenshot of, because I see the shop page like this https://take.ms/M89ra

    Regards

    Weber Joël

    You must visit a product page on a mobile device for see the display problem.

    https://www.vetement-carpe.fr/boutique/accessoires/mug-classic-black/

    Nodari Support Team

    Hi Weber

    The code is working just fine but looks like you enabled a fixed header and now the search field was hidden under it, here is the updated code:

    @media handheld, only screen and (max-width: 1024px){
    .mk-header {
        position: initial !important;
    }
    }
    @media handheld, only screen and (max-width: 968px){
    .single-product #theme-page .theme-page-wrapper {
        display: flex;
        flex-direction: column;
    }
    .single-product #theme-page .theme-page-wrapper .theme-content {
        order: 2;
    }
    .single-product #theme-page .theme-page-wrapper #mk-sidebar {
        order: 1;
    }
    .woocommerce div.product div.images.woocommerce-product-gallery {
        margin-top: 0px;
    }
    }

    Let me know results

    Weber Joël

    Hey guys,

    Nice it’s work. No i have a the same problem display with the letter from title product on the search from. (on device)

    Look screen shot

    Nodari Support Team

    Weber, is this the same problem? we are working on how to change content > sidebar position on the mobile device, it’s not related to the search widget and titles, I already made a reply to that problem in your other ticket 😉

    Thanks

    Weber Joël

    I know we have resolved this problem later but it was appear again now like i show you on the last screen shot

Viewing 13 posts - 1 through 13 (of 13 total)
You must be logged in to reply to this topic.
Login