Design shop page

Support
#1

I am trying to get my shop page to look similar to the one in the picture. Is it possible to get the product boxes to look similar to those in the pic or do I have to stick with the Ethos design? Maybe there is a plugin that will allow some custom changes, let me know if there is, thanks.

#2

Hi @waynepatt58 ,

Thank you for reaching out to us. Just like the blog page and archive pages you can not edit the shop page in any content builder. Because it is using a special template.

If you want to customize your shop page and want it to be editable in Cornerstone, simply do not set it as Shop page in Woocomerce > Settings > Display. Then use the Woocommerce shortcodes for displaying your products. You can paste your shortcodes into a RAW Content element.

Alternatively you can create WooCommerce product gallery with Essential Grid (see http://essential.themepunch.com/template_library/arthur-woocommerce-product-gallery/)

Hope this helps!

#3

Thanks for your help. As a test I have created a page and added a product shortcode and it displays as in the picture below.

When I hover over the product a black box pops up with a red button. Is there anyway I can get rid of that and place the button in a different location or is that just part of the Ethos theme and can’t be changed?

This is what I want to achieve;

#4

Hey @waynepatt58,

Yes, that is the Ethos Product List Item design and there’s no option to change that. What Nabeel suggested is only to achieve a customized page and not a customized product listing. For that, you’ll either need to custom code or use the Essential Grid as mentioned also by Nabeel. Even with Essential Grid though, you’ll likely also need some more custom development. I’m especially referring to the red ribbon on top of the product list item. I’d recommend you hire a web developer if you’re not sure how to code that.

Thanks.

#5

OK, I am trying essentials grid but maybe dont need it. Thinking of just creating these products manualy in their own columns as they are only links to affiliate sites.

Is there any way though to create the filter on the right, guess I would need to use woo commerce?

#6

Hey @waynepatt58,

If you’re looking for updating the product list without page reload (AJAX) on category link/filter click, you would need a plugin like FacetWP or a products filter plugin if you’re going to use WooCommerce.

The simple way though is to redirect to another page with another set of products list.

Hope that helps.

#7

I noticed in the URL that this sites product page URL has TAG in it. Do you think they are using a plugin to filter the products?

#8

Hi @waynepatt58,

Sorry, we can’t really tell, but it looks like that site is not even using WooCommerce but purely customize.

I’ll give you a few suggestions, first use the Ethos layout as it is and have the native WooCommerce Filter Widgets on the sidebar.

Second, utilize the Essential Grid to create your own Product Grid and have the Grid’s filter feature. (you need to learn how to use Essential Grid)

Third this method: How to customize the WooCommerce Shop page [2020] (not supported)

The last one is to write your own WooCommerce Shop Page template (not recommended and not supported)
How To Customize WooCommerce Shop Page

Thanks,

#9

I would be happy if I could just set the layout as the same as your shop demo;

but I cannot even get the filter to be on left side of page, (I know I can set the sidebar for entire site to left in options but this would alter a lot of other posts, I really only wanted the side bar on the shop page to be on left) so is it possible to setup the same as your demo?
Right now all I can get is this, which is pretty ugly

Is it possible to get the products to display the same as in your demo? with no black bar and details and price below them?

#10

Hey @waynepatt58,

Your first screenshot doesn’t look like our theme but I might be wrong or somehow forgot about it. Would you mind providing a link to our theme’s shop demo?

We have a layout filter that can be used in your functions.php. I’ll provide sample code, but we expect that you learn how to use the filter as we will not support issues that will arise from the use of custom codes.

/* Left Sidebar */

add_filter('x_option_x_layout_content', 'override_layout_content_for_single');

function override_layout_content_for_single( $layout ) {  
    if ( is_shop() )  {      
       $layout = "sidebar-content";
   }
  return $layout;
}

You’re currently using Ethos and that’s the archive design. Switch to other Stacks.

Hope that helps.

#11

here is the link, you could be right in that it is not your demo.

http://demo-product-filters.anexter.net/

#12

Hey @waynepatt58,

Yep, that’s not our demo. Please follow the setup I’ve described in my previous response.

Thanks.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.