#135165 JetWooBuilder: Shop Page Template Showing Default Sidebar

Landing Forums JupiterX WordPress Theme JetWooBuilder: Shop Page Template Showing Default Sidebar

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • JLB

    Hi there-

    Trying to set up a template for /shop/ and for the category pages

    Followed the Steps here

    in STEP 2 we loaded one of the layouts

    We added our own Banner above the loaded Banner (which we left so you can see this is from the loaded layout)

    We added a couple widgets to the right sidebar

    We assigned the Template here https://pupco.horton.webservice.team/wp-admin/admin.php?page=wc-settings&tab=jet-woo-builder-settings

    TWO ISSUES:

    1)  When we view /shop/

    I’m seeing the default sidebar at the top right of the screen overlapping the Banner area- I’ve made sure to Edit the Page and set the Layout to NO Sidebar

     

    2) Product Category pages have the above problem PLUS they show the Page Title Bar

    We’ve tried changing Settings in Customize but can’t figure out how to NOT show the Page Title Bar on Product Category pages like

    /product-category/sets/

    without ALSO hiding it on other pages like /cart/

    I tried setting a Category to specifically have No Sidebar but its still showing

    /wp-admin/term.php?taxonomy=product_cat&tag_ID=52&post_type=product&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dproduct_cat%26post_type%3Dproduct

     

    Thanks so much

    J

     

    Private
    Nodari Support Team
    This reply has been marked as private.
    JLB

    Hi there-

    Thank you for that, it does seem to be working.

    Two more questions RE Template Layout settings

    1) I have the Shop Template set to:
    General Settings > Template Layout > Elementor Full Width
    /wp-admin/post.php?post=1551&action=elementor#

    I have the Shop Page edit settings also set to same
    /wp-admin/post.php?post=243&action=edit

    When Loading pages that use this template like  /shop/ or one of the Categories /product-category/sets/

    you can tell when the page is loading that it’s not using a Full Width template b/c the top banner shows content width while it’s loading and snaps into place full width once it’s loaded.

    2) Is there a way to tell this template to allow the Header to Overlap?
    We have the site set to NOT overlap so that default pages, cart, etc have a normal header and I have styled pages set to Overlap

    I tried setting the SHOP page itself to Overlap Content  /wp-admin/post.php?post=243&action=edit
    But it still isn’t overlapping

    3) The Default image isn’t working for /shop/

    I tried setting the Featured image on the SHOP page itself
    In the Shop Landing Template > Background Overlay > Image > Term Image > Settings – I have a Fallback Image set there and it IS showing the correct Category images but neither approach seems to be showing the image we want for the SHOP page

    • This reply was modified 3 weeks, 6 days ago by JLB.
    • This reply was modified 3 weeks, 6 days ago by JLB.
    Nodari Support Team

    Hi there

    “you can tell when the page is loading that it’s not using a Full Width template b/c the top banner shows content width while it’s loading and snaps into place full width once it’s loaded.” – Well, there is nothing wrong, its just styles loading timing, it needs some time to load the css files with the style, such problem can be managed with caching plugin, if im not wrong you are not using it at the moment

    2. Header overlap can be set globally from the Appearance > Customize > Header, this feature can not be added from the templates,

    3. Sorry, but I no longer have access to the backend and I cant check the setup or anything else, can you please enable it again?

    Thanks

    JLB

    Hi there-

    SORRY – set you to Administrator again

    1) “you can tell when the page is loading that it’s not using a Full Width template b/c the top banner shows content width while it’s loading and snaps into place full width once it’s loaded.” – Well, there is nothing wrong

    MY REPLY I’m sorry if I wasn’t clear. This causes a ‘flash or jump’ on load (which my boss hates) like in the original Jupiter theme if you don’t set the Page to Full width template but style sections on the page to be full width.

    So, even though I have the Shop Template set to:
    General Settings > Template Layout > Elementor Full Width
    it is not loading a full width template

    If you inspect code, on a page like Home or Contact, you can see the page is set to Full Width – you do not get a container class with a content width

    But if you inspect the Shop Page:

    <main id=”jupiterx-main” class=”jupiterx-main” data-markup-id=”jupiterx_main”>
    <div class=”jupiterx-main-content” data-markup-id=”jupiterx_main_content”>
    <div class=”container” data-markup-id=”jupiterx_fixed_wrap[_main_content]”>  – when highlighting this section in Inspector you can see the page is not full width and the  banner

    To help see this better, on the Shop Landing Template, I duplicated the top Banner and then TURNED OFF the Stretch Section option.

     

    2) So in order for the Shop template to Overlap, we DO need to set the sitewide Header to Overlap and then add code for top padding for NON overlapping pages like /cart/ or blog posts so the page title bar/content on those pages does not go behind the Header?

    IF that is the case, is the best approach to add top padding to jupiterx-main for those pages not using page-template-full-width?

    3) added you back as Admin

    Thanks so much!

    Mohsin Al-Rabieai Support Team

    Hi there,

    1 – You are right. However, this is how it works. I will bring a discussion to the theme and will let you know the result. I don’t think it would be possible to change the way it works, but there should be a way to add a new template or an option to make the default pages full width.

    Right now, if you want to make the woocommerce pages fullwidth, you can use this CSS fix:

    @media screen and (min-width: 1140px) {
       .woocommerce .jupiterx-main-content .container {
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;
            overflow-x: hidden;
        }
    }

    2 – Yes, correct. If you wish to have overlapped headers on the default pages, you need to enable the Overlapping content globally and add margin and padding to the content. You may need a different CSS fix if you are using different page templates. If you let me know what pages are you up to, I can provide you with a CSS fix for it.

    Bests

    JLB

    RE 1) OK thanks, good to know. There’s a setting in the Elementor Template Edit screen Settings to set the Template used but it didn’t see to be kicking in.

    RE 2) I have some code I’ve been using but I’d like to see what approach Artbees would take to make sure I’m doing the best way possible so let’s look at top margin or padding code for pages like

    • Default standard pages like if you just click Add New Page and don’t change anything
    • /cart/
    • Blog Post
    • Search Results

    Like for sites with Fixed Header I’ve been using something like:

    .archive .jupiterx-main,
    .page-template-default .jupiterx-main,
    .post-template-default .jupiterx-main,
    .woocommerce-page  .jupiterx-main {
    	margin-top: 12rem !important;
    }
    Nodari Support Team

    Hi there

    1. Ok
    2. Code looks beautiful, no complaints, use it as is 🙂

    Let us know if you have any other question 🙂

    Regards

    JLB

    Hi there-

    Thanks for all the info, most everything is working well now but I just realized I didn’t get an answer for one item above

    3) The Default image isn’t working for /shop/ – and I can’t tell where the image that is loading is coming from. It is using the same Background image as the Category named Sets

    The template is set to use the Term Image on the Top Section’s Background Overlay layer

    /wp-admin/post.php?post=1551&action=elementor#

    Since there is no Term for /shop/, I set a Featured Image on the Shop page’s edit screen but it’s not kicking in

    /wp-admin/post.php?post=243&action=edit

    Not sure where else to look

    Thanks!

    Mohsin Al-Rabieai Support Team

    Hi there,

    In fact, while you are using the thumbnail_id of the product category as the cover section background, the shop page doesn’t have any thumbnail_id field nor it can not use the category thumbnail at all. It is using the first product thumbnail instead. If you want to show a certain image on the shop page alone, the easiest way is to use custom CSS. I added a CSS class to your cover section, and now you can change only the shop page cover image by adding this CSS into Customize -> Additional CSS:

    .woocommerce-shop.woocommerce-page .custom_shop_cover_bg  > .elementor-background-overlay {
        background-image: url('https://YOURDOMAIN.COM/wp-content/uploads/2021/10/IMAGE_NAME.jpg');
    }

    I actually added this into the custom CSS section and you can see it.

    Hope it helps 🙂

    Bests

    JLB

    OK thank you, that makes sense. Thought about that a bit because I’ll use this approach on future builds so I went on and created a 2nd Shop Template to use for Categories.

    Thank you so much for all the help!

    Alexander Hutsol Support Team

    Hello,

    You are welcome 🙂

    Feel free to create a new topic if you have any other questions.

     

    Regards.

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