Shop page not displaying properly

Hello,

I am building my shop page and followed all directions. I have built the page on several themes. However, with pro, i am having difficulty. attached are two screen shots. The one is what my site looks like on the back end when I build using visual composer. The other is what is being displayed on my page which is only poorly fitted product categories that are there no matter what is on the back end.

I am adding login credentials to my site in a secure note. Feel free to go to the “Book Now” page to view the shop page I am having issues with. Thanks

Hi There,

Please add the following CSS to Theme Options CSS

.product-category img {
  width: 100%;
}

Hope it helps

Hello @Joao

That may help the image however if you look at the two snapshots I am supposed to have a lot more on that page than what is showing up.

Hi there,

What are the other pages? That CSS should take effect in all pages since it’s not a unique CSS. But I checked your CSS and it’s something like this

.product-category img {
  height: 200px;
  width: 200px;
}

The purpose of adding 100% is to prevent gap, adding 200px is against that, what if it’s viewed on larger screen, then it will still have gaps. Please change it to 100% and remove the height.

Thanks.

Hello @Rad,

Yes I understand the picture setting needing to be at 100%. I was just playing around with it and had not set it back to 100% before walking away.

The primary issue is not the gaps. It is the page itself not displaying the proper content shown on the back end of the page. So I will need to figure out how to get that shop page displaying more info. and I don’t mean just products/categories that you set in woo settings. I want an embedded google map on there and other text. but I cannot get it to display. At All…

Thanks for the help!

Hi there,

The shop page is dynamically generated by Woocommerce. So you cannot edit it in Visual Composer or Cornerstone. Whatever content you may have in that page will just be replaced by Woocommerce and its template.

Basically Woocommerce shop page doesn’t pull the content from the page editor, instead, it uses Woocommerce product template located in Woocommerce template directory wp-content/plugins/woocommerce/templates/archive-product.php some of these files are modified by X inside wp-content/themes/x/woocommerce/.

Which means customizing the shop page needs php code development, you can either edit the php files for customizing the shop page or use Woocommerce “HOOKS” on your child theme fucntion.php to add additional content on your shop page:

If you want a custom shop page, the easiest thing to do is to create a page and use the Woocommerce shortcode to display the products.

You can find more information about woocommerce shortcode from their documentation:


Customization of the Woocommerce shop page is outside of our support policy and you will need to do it yourself using the links we provided above.

Thank you for your understanding.