[Resolved] Shop page customization

[Author]

Posts

[marieL-2]

Hi,

It's really hard to customize Woo Commerce pages with Beaver Builder and Toolset plugin. I watched a lot of tutorial but I couldn't do something simple.
On this page : hidden link I would like to not show the breadcrumbs, page title, Showing all results and Default sorting. I want to display just the products.
How can I do that ?

Thank you for your help.
Regards

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

The WooCommerce shop page is the WordPress archive for the product post type. To customise it you need to:

- install and active our WooCommerce Views add-on plugin
- to change the settings to stop using the standard WooCommerce template for product archives and switch to using the WooCommerce Views template (at Toolset > WooCommerce Views)
- create a custom archive at Toolset > WordPress Archives for products
- design the output section of this archive using a combination of standard Views shortcodes (e.g. wpv-post-title) and special WooCommerce Views shortcodes (e.g. wpv-woo-product-price) or even standard WooCommerce shortcodes.

For this latter part you can use Beaver Builder to design the output for the products.

The page builder button doesn't appear on this page, you will need to create a content template for product archives (at Toolset > Content Templates) and design it using Beaver Builder. Then go back to your custom archive and in the output section insert the content template in the loop output section.

If you follow those steps you should be able to control the shop page design to include only what you want to appear.

[marieL-2]

Yeah,

I already did what you told me.
But I cannot erase these informations : the breadcrumbs, page title, Showing all results and Default sorting at the very top of the page.
How can I do that please?
Thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

Elements such as breadcrumbs are added directly by WooCommerce, regardless of what theme you are using, and each need special handling to remove or modify.

Where you need to add PHP code you can add it to your theme's functions.php file, or using a plugin such as Code Snippets.

* To remove the breadcrumbs, you will need to add code (which depends on your theme) as described here: https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/#section-4

* To remove the page title, add the following code:

/**
 * Remove WooCommerce shop page title
 */
add_filter( 'woocommerce_show_page_title', '__return_false' );

/**
 * Remove the sorting dropdown from Woocommerce
 */
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_catalog_ordering', 30 );

/**
 * Remove the result count from WooCommerce
 */
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_result_count', 20 );

If you have problems with the above let me know.

[marieL-2]

Hi Nigel,

Thank you. I've managed to get rid of the breadcrumbs.
However, I'm not sure where to put the other codes. When I put them on my functions.php file, my website is broken. And when I put them on my Css in my child theme, nothing changes. Can you please advice ?
Thanks

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

You should add those code snippets to your theme's functions.php file.

When you say the site is broken, what do you mean? It produces a fatal error?

Can you turn on WordPress debugging and then report back to me what the errors are?

If you haven't already, turn on the debug log by editing your wp-config.php file and change the line with WP_DEBUG like so:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

That will create a debug.log file in your wp-content directory which you can examine in any text editor. Try visiting the same page where you observe the problem and then inspect the log. If you don't find the debug.log file it means it didn't generate any warnings or errors.

[marieL-2]

Hi,

I tried to turn on the debug log but i got that error message on a blank page.
And when i put that extra codes you gave me, i got that error message on my shop page (see attached screenshots)

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

The error on your blank page suggests that there is something wrong with how or where you added the debug code to wp-config.php, those lines are just standard WordPress code that are ubiquitous.

Perhaps I can have a look at your site and check how you have added the code (both the debug code to your wp-config.php file and the code to remove the unwanted WooCommerce elements).

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

The FTP credentials are not working for me, I am unable to connect to the FTP server and so I cannot read or edit your wp-config.php file or your theme's functions.php file, although the WordPress credentials are correct.

Can you check the credentials you provided (I'll mark your next reply as private again).

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

I had an error in the snippet I added above for the page title filter (I had "__false" instead of "__return_false" as the second parameter). The practical effect was the same—the title wasn't added—but now it is correct and the warnings are gone.

I double-checked the others and they are working, and I turned the debugging off, everything should be okay now.

[marieL-2]

Thank you so much!!!

I still have 2 questions :

- I want my shop page to display my products in 4 columns. I tried to do that but I can see the same products in 4 different columns of the same line. How can I make sure that every image is a different product and not duplicate them?
- why the price is not centered even thought I added the code to centered it?

Thank you for your help.
Regards

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

I'm not sure how you are generating that shop page. It seems you are not using Toolset to make a custom product archive (which is the shop page). You have made a custom product archive, but it is not being used (the settings at Toolset > WooCommerce Views for Product Archive Template File is using the default WooCommerce template).

I suspect one of your other plugins (The Grid?) is responsible for what you are seeing, where the same product is repeated four times on a row.

If you want to use Toolset to design a custom shop page you will need to change the settings to use the WooCommerce Views template for product archives, see: https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/

You may also want to read about outputting content in a grid using Toolset here: https://toolset.com/documentation/user-guides/view-layouts-101/

If you have problems getting that to work, could I please ask you to open a new ticket, as the initial question is resolved, thanks.

[marieL-2]

Hi Nigel,

No I'm using Beaver Builder plugin and template.
I followed that instructions : hidden link
Where did I get this wrong then?

Thank you for your help.
Regards.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marie

I'm not familiar with that video (it's not one of ours), but I can see in your settings that you are not using a Toolset custom archive for the shop.

Sorry for the inconvenience but our support policy is to deal with one issue per thread and the first issue has been resolved. Could you please open a new ticket about this? You are welcome to assign it to me to deal with.

[marieL-2]

Thank you!