Archived topic
Custom Woocommerce Thumbnails & modification best practices
5 replies · Started by Eric on April 22, 2021
I want to have minimalistic product thumbnails on mobile, similar to this example from amazon: https://drive.google.com/file/d/1_NNV5fuyEamVt4HPB1lI_gjJrj60dIm5/view?usp=sharing
But on desktop and tablet, I want to use the standard woocommerce thumbnails. I figured out how to replicate the effect using codepen.io, but I'm not sure how I should be implementing it into wordpress/generatepress.
I tried to create a custom function using the code snippets plugin that would generate the html for these thumbnails and add them to the appropriate area with add_action( 'woocommerce_product_thumbnails', 'custom_mobile_product_thumbnails', 30 );
I was then going to use css to hide the standard thumbnails on mobile, and the custom ones on desktop.
But that didn't seem to work unless I used remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
Now I am wondering if my planned approach makes sense at all, or if using a child theme (not sure how to do this) would help if I'm going to be making a lot of modifications for mobile vs desktop.
I also want to move the location of the short description to below the add to cart button on mobile. I'm not sure how to do this without including it in two places with woocommerce hooks and then using the same idea of hiding one conditionally. I have more examples of similar changes I'd like to make. It seems bad to have this type of duplication, but I'm not sure how else to do it.
Additionally, I'm wondering about how I should be making my css edits. Right now all of my changes are being added to the simple css wordpress plugin in one file. Is there a better way to go about this using generatepress, or is this approach fine?
I'd like to follow best practices for modifying woocommerce/generatepress if possible. Thanks.
Hi there,
first of the woocommerce_product_thumbnails was deprecated - it does only exist if you unhook the carousel as per your second script.
If you want to add separate mobile carousel then you will probably need a developer as thats something we don't have an answer for.
If its simply a single image that you want to hook in the you may want to install Niche and check out how it adds the Stacked Gallery for desktop... the process is the same just in reverse :)
Generally speaking i will always install a Child Theme when building a Woo site. There are plenty of things that it will be required for - a common example is if you want to make amends to the plugins email templates.
For CSS - not such a big deal leaving it in simple CSS unless you start writing 100's lines of CSS - then i would recommend moving it to the child themes styles.css
No, I was hoping to fully replace the carousel on mobile with something that still indicated to the user the number of photos and their place in the sequence. I will probably drop it and come back to it, it isn't that important to me.
I will take the plunge and start using a child theme if it is mandatory for some things anyways. I was suspecting that was the right direction to go.
Is the styles.css one file? And can I make all of my edits there, or will I still need the simple css file?
Thanks for the help.
Yeah Woo is a complicated beast - unless you can find a plugin that does what you need it requires custom development.
For the child theme - You can move all the CSS you have in the Customizer > Simple CSS into your Child Themes styles.css
Thanks for your help as always!
Going to mark the question as resolved.
You're welcome
