Community Forums › Forums › Archived Forums › Design Tips and Tricks › Not able to customize woocommerce product-archive page
Tagged: page customizing, styling
- This topic has 6 replies, 2 voices, and was last updated 7 years, 7 months ago by mazeymaze.
-
AuthorPosts
-
September 23, 2016 at 9:01 am #193594mazeymazeMember
Hi everybody,
I have recently posted this problem, but haven't resolved it yet, so I really hope someone here can help me with my problem.
I am having trouble customizing the product archive page. As far as I can ses/read, the archive-product.php page is the page used to display products in a specific product category. When copying this file inside my woocommerce folder in my child theme (agentpress-pro) and modify it nothing happens.
If you click the link below and view the page, you'll see that what I need to do is to style the page with padding etc. so it matches the same as the product page - perhaps I can do this with css and no need to edit the code?
I have tried disabling the genesis connect plugin and afterwards editing the archive-product.php file and when doing so, the changes are made, so maybe the taxonomy is different in Genesis and I need to customize a different file?
I hope somebody can help me out.
Best regards,
Jens
https://www.kuhlmann-heating.com/product-category/drum-heaters/The site is under construction, so a maintenance plugin is activated. You can login a view the page with:
https://www.kuhlmann-heating.com/product-category/drum-heaters/
Username: viewer
Password: kuhlmann123321September 23, 2016 at 10:52 am #193600Victor FontModeratorGenesis Connect has its own archive-product page. The archive-product page does not display content. It calls the WooCommerce content-product.php template. Content product displays the actual products. Styling the page, does not require editing the page. The WooCommerce style sheets load after the Genesis child theme style sheet and therefore have the priority. If you want to change WooCommerce styles, you have to change the load order of the style sheets so you can make WooCommerce changes in the Genesis child theme style sheet. http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 23, 2016 at 11:02 am #193601mazeymazeMemberThanks for responding again, Victor - I really appreciate it.
I have added my own stylesheet to my code and placed it in an order, so it loads after both the Genesis and Woocommerce stylesheet.
One thing that's troubling me is that all other pages out of the box are styled with padding etc. but for some odd reason this page isn't. I mean I have activated the Genesis Connect to make the connection from the framework to Woocommerce and everything from a standard point of view looks fine - but this page falls out of that category. Maybe I am missing something here?
Maybe I can get you to take a look at the site? Can you point me in the direction to how I can add padding around the content on the page https://www.kuhlmann-heating.com/product-category/drum-heaters/ - the .content class does react to my changes, but as you also know, the .content class is also located for the product-detail page, and on that page the styling is correct, so I do not want the padding to be on this page.
Thanks again.
September 23, 2016 at 5:36 pm #193619Victor FontModeratorGenesis Connect doesn't change WooCommerce classes. The class you want to add padding to is .woocommerce ul.products
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 24, 2016 at 4:06 am #193635mazeymazeMemberHi Victor,
Maybe I'm not too good to inform exactly what I want to achieve. I am not trying to style my products - I simply want to style the page that lists the products. If you look at the page now, you will see that the page header and sub header text is missing a general padding, so that there is some whitespace before content is shown. My body background color is somewhat grey - my content background is white, so it's easy to see that the content needs some sort of margin or padding so it does not fill the entire content area.
If there is some way of knowing the exact page that displays the products maybe I could add a CSS class to the content div and in that way style the page? The div does contain a .content class, but this is the same class used on the product detail page, so adding style to this class would also affect the product detail page, which I do not want.
Hope you can help.
September 24, 2016 at 4:20 am #193636Victor FontModeratoruse .term-drum-heaters .content
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 24, 2016 at 4:23 am #193637mazeymazeMemberGreat Victor - this works!
Thanks a lot for your help and patience 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.