2) As you can see from the screenshot, you can select how many columns do you want that product to cover, if you set it to 12 it will display in a single column, if you set it to 6 columns it will be displayed as 1/2 of the column, and so on and so forth.
In the Demo site, it stretches to the full width. That is not happening for my site.
What I have noticed is any Shop page that gets assigned as base shop page in Woocommerce doesn't work with all elementor features. How do we work around that?
---------------
There is another issue I wanted to check
2.
How do we set up the hamburger element to open a certain menu? Also, is there a way, I can put a background image for the header (For example a gradient)?
1) Yes, you're right, when you assign a page at WooCommerce settings, you can't edit it with Elementor, but if you want to change anything on that page I can help you with some CSS code to achieve that.
There's the code that you can add at Appearance > Customize > Additional CSS to change the width of the Shop Wide Sidebar page.
In the theme you can either use the header that comes as default where you can upload the logo from Customizer and manage it from there or via Elementor where you can create headers and assign them to different pages, so please hover onto button Edit with Elementor and see if there appears a header template. https://prnt.sc/ppaaad
Click onto the template and the editor for that template will be opened where you can easily edit it.
1) Thanks. That code works for a laptop screen. But there's a huge gap to the right side on a desktop or an iMac screen. (See Attachment)
2) I figured where and how to add/update header templates. I was only asking about a particular elementor item - hamburger. How do I assign a menu item to it? I want to use a hamburger icon in desktop too and use like a full screen menu or sliding menu for desktop as well.
I am very sorry for the late reply, we're on holiday until 10 of January, please expect a delay in the replies. Happy holidays, we wish you all the best in 2021.
I've updated the code that I've added before, can you please check it now.
I've added the following code at Appearance > Customize > Additional CSS, and now it's full-width, also I've added some padding at the left and right, you can keep it or remove if you want.
Deleted demo products still showing up on Shop Page. Cleared Wordpress cache, browser cache etc but nothing is working
Please check the following link
https://woocommerce-340028-1667679.cloudwaysapps.com/shop/
Its working fine from Page-2 but the first page still has demo products
UPDATE - Deleted products vanished once I opened the page in elementor and saved. Don't' bother checking it.
In Shop Wide Metro. how do we make certain product images bigger as shown in Demo
Also, in the Shop wide metro page, products are still inside a container. Why isn't it expanding to full screen like the demo
Hi Varun,
Happy holidays 🎉🎉
1) Glad to know that you've managed to solve it
2) As you can see from the screenshot, you can select how many columns do you want that product to cover, if you set it to 12 it will display in a single column, if you set it to 6 columns it will be displayed as 1/2 of the column, and so on and so forth.
- https://prnt.sc/wd2qsy
Feel free to ask for anything you need.
Kind Regards
Thanks for the reply. Happy holidays 🎉🎉
Have a more specific question now
1.
I have set up "Shop Wide Sidebar" as Shop page in Woocommerce Settings. But when I go to a category page it doesn't seem to be working like it should.
This is how it is currently working on my site (it is working inside a container)
https://woocommerce-340028-1667679.cloudwaysapps.com/product-category/silk-sarees/
In the Demo site, it stretches to the full width. That is not happening for my site.
What I have noticed is any Shop page that gets assigned as base shop page in Woocommerce doesn't work with all elementor features. How do we work around that?
---------------
There is another issue I wanted to check
2.
How do we set up the hamburger element to open a certain menu? Also, is there a way, I can put a background image for the header (For example a gradient)?
Hi Varun,
1) Yes, you're right, when you assign a page at WooCommerce settings, you can't edit it with Elementor, but if you want to change anything on that page I can help you with some CSS code to achieve that.
There's the code that you can add at Appearance > Customize > Additional CSS to change the width of the Shop Wide Sidebar page.
.woocommerce .l-theme-wrapper .l-main-wrapper { width: 1440px !important; }2) How to edit the Header Template?
In the theme you can either use the header that comes as default where you can upload the logo from Customizer and manage it from there or via Elementor where you can create headers and assign them to different pages, so please hover onto button Edit with Elementor and see if there appears a header template. https://prnt.sc/ppaaad
Click onto the template and the editor for that template will be opened where you can easily edit it.
- Video Tutorials about header builder.
Feel free to ask or anything you need.
Kind Regards
Hi,
1) Thanks. That code works for a laptop screen. But there's a huge gap to the right side on a desktop or an iMac screen. (See Attachment)
2) I figured where and how to add/update header templates. I was only asking about a particular elementor item - hamburger. How do I assign a menu item to it? I want to use a hamburger icon in desktop too and use like a full screen menu or sliding menu for desktop as well.
Want to build a header something like this - https://kanakavalli.com/
Hi Varun,
1) Sorry for that, please add also the following code at Appearance > Customize > Additional CSS.
.woocommerce .l-theme-wrapper .l-main-wrapper .container { width: 100% !important; }2) Pleas watch the attached video on how to create an overlay header.
Feel free to ask for anything you need.
Kind Regards
2) Thanks for the video. That is what I wanted.
1) This code just made the products and sidebar center aligned and inside a container. Its still not stretching full width like your demo.
https://woocommerce-340028-1667679.cloudwaysapps.com/product-category/silk-sarees/
Hi Varun,
Can you please provide me with your wp-admin, so I will have a quick look to see what's going on.
Feel free to ask for anything you need.
Kind Regards
Happy Holidays! Do let me know when you manage to solve this. Thanks
Hi Varun,
I am very sorry for the late reply, we're on holiday until 10 of January, please expect a delay in the replies. Happy holidays, we wish you all the best in 2021.
I've updated the code that I've added before, can you please check it now.
Feel free to ask for anything you need.
Kind Regards
Hey,
Thanks for replying during the holidays.
.woocommerce .l-theme-wrapper .l-main-wrapper {
width: 1440px !important;
}
.woocommerce .l-theme-wrapper .l-main-wrapper .container {
width: 100% !important;
}
@media (min-width: 1367px)
.container {
max-width: 1440px !important;
}
The above code still didn't make it full screen. I deleted it for now since it was aligning all my content to left side.
Hi Varun,
Sorry for the late reply,
I've added the following code at Appearance > Customize > Additional CSS, and now it's full-width, also I've added some padding at the left and right, you can keep it or remove if you want.
.woocommerce-page .container { max-width: 100% !important; width: 100% !important; padding-left: 60px !important; padding-right: 60px !important; }Feel free to ask for anything you need.
Kind Regards
Yay! It finally works. Thanks a ton! :)
You are welcome anytime, feel free to ask for anything you need
If you like our theme, please leave us a rate of 5 stars at ThemeForest, that would help us a lot.
Kind Regards,
NeuronThemes