woocommerce theme integration not working?

Hiya, before attempting to fix what you already have, could you explain exactly what method(s) you’re using now?

Could you paste the contents of any new page template you created or functions you added to a child theme into separate Pastebins and link to them here?

https://pastebin.com/

Hi Kathryn,

here’s the contents of my woocommerce.php file, attempting the basic (non hooks) method: https://pastebin.com/a02XfsyG

thanks

That file looks alright, though I do notice some other issues on the sample page you linked above – I tried to right-click to inspect the code in your WooCommerce section and wasn’t able to open the browser inspector. I’m actually not able to right-click or directly select anything below the menu and header area on that page. When I open the browser console, I see a Network error of unknown origin, as you see here:
https://cloudup.com/ctzL-2gAHsT

You might want to try to rule out a plugin conflict by turning off all plugins aside from WooCommerce and see if that gets rid of the error and allows right-clicking again. If it does, then reactivate your plugins one by one, checking the site between each reactivation, to find the culprit. Once you do, that may also solve the layout issue, or you may just need to add some custom CSS to add some margins. Without being able to right-click and use my browser inspector it’s much more difficult to help you with any custom CSS you might need, so I suggest trying to solve that issue first. Let me know how it goes.

Hi Kathryn,

I tried deactivating plugins and that didn’t seem to help, I don’t have much installed yet and those few seemed to make no difference. There was a plugin preventing right click so I disabled that, you should be able to take a look at the code now.

I wouldn’t mind a css based solution but would I need to implement it for every product individually, or is there a way to do so for the entire class?

Thanks

I just noticed that your product page is missing the page-content div, which is what sets the 660px page main column width in Argent. I think that’s why the WooCommerce pieces don’t have a width on them.

That 660px width would be too narrow for your WooCommerce product layout, I think, so I wouldn’t put effort into trying to get the div back.

Instead, try something like this in your custom CSS to restrict the width for all product pages to at most 1000px:

.single-product .product {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 1000px;
}

You’ll want to test this at various screen sizes, but adding a bit of left and right padding seems to keep it looking OK at a variety of sizes. See what you think.

Hi Kathryn,

Thanks, that code worked great thank you. The shop main page (/shop) is still messed up but I think I’ll make a custom store home using shortcodes instead.

thanks again

OK – you’re welcome!