Hello,
I have read somewhere about a shop page or plugin like woocommerce for the newspaper theme. What I am looking for is a page to display simple products like t-shirts and mugs. Any piece of advice on how to procede? I think I have seen something in the forum or in the demo that I perused a while back.
Hi,
Woocommerce will import a default shop page initially, this will show products on the page like this
– https://www.screencast.com/t/8AfWgJnt
– https://docs.woocommerce.com/document/woocommerce-pages/
The number of products per page can be controlled like this
– https://docs.woocommerce.com/document/change-number-of-products-displayed-per-page/
That code in the child theme or main theme functions.php file will allow you to change the number of products on a default shop page.
Or you can display products on pages using the shortcodes provided by woocommerce
– https://docs.woocommerce.com/document/woocommerce-shortcodes/
These shortcodes can be entered on pages using a text element, with the tagDiv composer
– https://www.screencast.com/t/6YDbXpsd
– https://www.screencast.com/t/3t4Vz2t8
This way you could display for example products and other elements on the same page. This is how the theme woocommerce demo is made, with shortcodes
– https://demo.tagdiv.com/newspaper_tech/shop/
This the actual page content of the demo page, maybe you can look it over
– https://pastebin.com/2RCe4N7C
Thanks
Thank you for your reply.
I like the demo page here https://demo.tagdiv.com/newspaper_tech/shop/
and I will be happy to replicate it for now.
If I understand correctly I need to:
– Add woocommerce plugin – done.
– Paste the code you provided in the text window – done.
But:
1. Shall I add this text in a New Page or in the Shop page generated by woocomerce?
I did both:
– in the default shop page it won’w work, for example I don’t see the welcome text;
– in the new page the welcome text is not stylised and I don’t have those nice black line dividers with the boxed text nor I have the sidebar as well as the featured image (in the demo page the lady smiling with the gloves).
What am I doing wrong? Please help.
PS: I have installed the animal demo theme and I don’t want to install another demo, if possible.
Thank you.
Hello,
You will have to style the page in the tagdiv composer to your preference. That page was created before the tagdiv composer was born so it could not work properly in the new builder. It was meant to provide an example of how the shop page can look, but not provide a predefined template. Please use the tagdiv composer and create the shop page to your own liking using the tagdiv composer elements together with woocommerce elements: https://docs.woocommerce.com/document/woocommerce-shortcodes/
Thank you!
Thank you for your reply.
I managed to get closer to what I need but I have a few issues:
1 – When I set “my page” (Woocommerce -> Settings -> Products -> Display) as “Shop page”, then “my page” won’t honour the styling that I created with tagDiv composer, but if I don’t set the page as “Shop page” I get the styling.
2 – Even though I selected a sidebar, and I created a new one just to make sure, there is no sidebar in the frontend in either pages, in the one set as “Shop page” and in the “standard” one.
3 – The Featured Image is not visible either in the default “Shop page” and in “my page”.
4 – To get the styling as per your demo page shown here https://demo.tagdiv.com/newspaper_tech/shop/
I used the “Text With Title” element, it seems the only one which could generete a text label with a line, but in the front end page I get this message:
“Html code here! Replace this with any non empty text and that’s it.”
Is there a workaround to avoid such message because I don’t need any text here but I like the style.
Please see below the code generated by the tagDiv composer:
[vc_row][vc_column][td_block_text_with_title custom_title="Mugs" header_color="#0a0a0a" header_text_color="#ffffff" separator="" tdc_css=""][/td_block_text_with_title][product_category per_page="12" columns="4" orderby="" order="DESC" category="mugs"][/vc_column][/vc_row][vc_row][vc_column][td_block_text_with_title custom_title="T-Shirts" header_color="#0a0a0a" header_text_color="#ffffff" separator="" tdc_css=""][/td_block_text_with_title][product_category per_page="12" columns="4" orderby="" order="DESC" category="t-shirt"][/vc_column][/vc_row]
Hello,
1. Please provide examples of what style you are referring to. Please paste a link to your page and mention what is wrong sith the styling.
2. A sidebar on a page is assigned through the taghdiv composer on a split row. Either add elements directly or use a widget sidebar element.
3. The featured image is never visible on pages. On our demo it is a single image element, not a featured images set in wordpress.
4. You could remove that text if needed. That is displayed when there is no content in that element. It would require a modification to the text with title element, like this
– https://www.screencast.com/t/wRcj94sjbmN
– https://www.screencast.com/t/F8oNaAY8o
– https://www.screencast.com/t/HEnp2eWxx
Thanks
Thank you for your reply.
1 – The style I am looking for is the one in the demo page https://demo.tagdiv.com/newspaper_tech/shop/. Now the styling is correct but only IF I don’t declare the page as a shopping page in woocomerce -> settings…
Now I just realised that when a page is set as a shop page the PAGE ATTRIBUTES box in the wordpress backend does not display the TEMPLATE options, usually it is set to -> DEFAULT TEMPLATE (other options, just to avoid confusion, are “pagebuilder + empty page”, “+ overlay menu” and so on…)
2 – Now I got how the sidebar works in this theme, it’s ok now.
3 – Ok!
4 – Thank you! Is it possible to put that code into the child theme? I put a copy of the file td_block_text_with_title.php, duly modified, on the child theme folder but it won’t work. Do I need to recreate the same folder tree in the child theme?
I have seen that block elements (like Block 3) have the styling I am looking for but the woocomerce categories are not visible in the “category filter” pull-down menu of the block settings of the WPBackery Page Builder. Maybe if we could select the category from the filter it would be easier and more flexible. I tried using shortcodes and IDs and slugs but it seems they are invisible.
Thank you.
PS: As for the child theme, I have found your excellent tutorial https://forum.tagdiv.com/the-child-theme-support-tutorial/
I have just to replicate the directory tree.
That should work properly, note that the shop page has to be configured before setting it as shop page. Create a new page for example, set the page template you want, and also the elements you want in it’s content. Then set it as shop page in the woocommerce settings.
Once set as shop page you cannot edit it with the composer again, or make any other changes to the page template.
Instead of the text with title you could use the title element, since there is no need for the actual text
– https://www.screencast.com/t/Og3IhjheMYVQ
Blocks can display products, nut products cannot be filtered by product category
– https://www.screencast.com/t/93xkDko1OE
Use shortcodes instead for better control – https://www.screencast.com/t/86kaVjDyP
Thanks
Thank you for your relay and clarification.
First thing: in case I make need to make a modification the page (for sample “showcase”) that has been set as the “shop” page, what procedure shall I follow? The “showcase” cannot be properly reassigned?
I build the page with the WPBakery Page Builder in the backend. The WPBakery doesn’t have a “title” block, only “text with title”.
When I switched to the tagDiv Composer – I must say I thought they where the same thing, displayed differently – I found the “title” element. I added it and it works, but the WPBakery Page Builder elements “backed” together and where no more editable. (Probably you still can, but in text mode!)
I’d rather to keep things editable, just in case.
Is there a method – WPBackery or tagDiv – preferable then the other, maybe for compatibility issues in the future?
If you were to try and edit the shop page after being set, it would cause an error in the tagDiv composer when trying to edit it.
With Visual composer there should be no problem. Either way you should decide on the composer you are going to use, and deactivate the other. They can influence each other when they are active at the same time, certain elements can be affected.
Visual composer does not have a title element, it has a text with title. The tagDiv composer with the multi-purpose plugin has a title element.
So build your page with the composer you want, deactivate the other. There should be no issues in this case.
Hi Simion, I did some preliminary tests of Composer and the WooCommerce shortcodes… Using the shortcodes in Composer doesn’t seem to be easy. Composer breaks the CSS and weird design issues come up.
I know Newspaper isn’t a WooCommerce focused theme, but when Composer hinders the use of a core plugin that is developed by WordPress (WooCommerce) I start to raise an eyebrow. And I’m not only speaking about this issue.
When Composer is enabled it disables sidebar selection on a page per page use case. Even on pages that aren’t being developed with Composer. It just doesn’t make sense from my perspective.
Just my thoughts.
Best,
IC
Hi,
What exactly is happening with the sidebars? I also tested some shortcodes in a page
– https://www.screencast.com/t/alF1Il4R9
– https://www.screencast.com/t/tlQMuoGy0rat
Provide some more details adn screesnshots if possible about the problem you are facing using these shortcodes.
Thanks
Hi Guys
We are using the following code to display products on our shop page:
[products limit=“1″ tag=“The Piano Works” columns=“1″]
Page: https://www.encoreradio.co.uk/shop/
The issue is that single products like this do not display in full width on mobile, just on desktop.
Any advice on a fix would be greatly appreciated.
Thank you
Hi,
@encoreradio How exactly do you want them to display on mobile? Woocommerce will display 2 products on a row in smaller devices. Each product will be 48% and float left
– http://prntscr.com/mnnm23
If you want them one below the other and 100%, you could try this CSS
– http://prntscr.com/mnnmh1
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
}
Enter it in the phones field – http://prntscr.com/mnnmtj
If I misunderstand please let me know.
Thanks
Hi Simion
Thank you very much for your reply – that has worked exactly the way I want it to.
Thank you
Dave
