Changing layout of shop categories

[Sebizzle]

Hi,

I would like to achieve the following layout on my shop page…

https://ibb.co/d7Gxc5

 

I have gone to my child theme editor, but cannot find any of the source code to change the HTML ?

I have identified the code that needs to be moved below the page-head pr tc banner code …

ALSO….

The layout of the categories ought to be put into a drop down for mobile version to be more user friendly. How would I go about this code change please?

As you can see the items are very awkwardly unresponsive….

https://ibb.co/ckZdjk

 

Many thanks,

 

[Harry]

Hi,

1. You can change all category follow shop page style by edit category navigate to Category Layout and unselect any layout

2. You can override content of woocommerce by copy file from Claue > core > libraries > vendors > woocommerce > templates

to claue-child > woocommerce (in child theme don’t have templates folder)

3. We try for mobile but it not good, you can use plugin https://wordpress.org/plugins/megamenu/ it work well with our theme.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sebizzle]

Hi,

I do not understand this you said…

1. You can change all category follow shop page style by edit category navigate to Category Layout and unselect any layout

I want to achieve this on all the shop and categories…

https://ibb.co/d7Gxc5

 

Thanks

 

[Harry]

You can follow this screen shot https://monosnap.com/file/d4MoHjJOjMOJGFQOY3ufOENH1pOqot#

or send us your site url, admin account as private reply. We need to take a look before give you suggest.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sebizzle]

Hi,

I am not referring to the sidebar, but the top bar (with category types). I would like it to be under the banner of the shop pages, as shown in my photo. The change you suggested changes only side bar .

 

thanks

 

[Harry]

It better if you make a note for us.

You can copy file archive-product.php from claue > core > libraries > vendors > woocommerce > templeates

to claue-child > woocommerce and move code from line 54 -58 to under line 83

http://take.ms/Y3z1p

 

Best regards

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sebizzle]

This reply has been marked as private.

[Harry]

Hi,

Yes, you have to create new folder “woocommerce” in claue-child and copy file archive.php. For this case you only can do in cpanel or do on your computer and upload to hosting.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sebizzle]

Is it possible to change the category list layout when media is perhaps less than 1366px of width and then use the function in the widget to change catgory list in the shop to drop down ?

using the —>   dropdown_product_cat

https://ibb.co/c1nKjk

At the moment it is not responsive: https://ibb.co/ckZdjk

Maybe this CSS code to turn to the drop down at certain media size may be best ?

I think this is possible? It might be easier than using the uber menu plugin ?

 

thank you

[Harry]

Hi,

With exist code it doesn’t support change product categories menu to dropdown on mobile.

You can add custom css code in Claue > Theme Option > General Layout > custom CSS to make categories menu as swipe on mobile

@media only screen and (max-width: 736px) {
.shop-top-sidebar .widget ul li {
padding: 10px;
}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts