I'm trying to add an eye-catching grid to the homepage of my webshop.
I use WordPress - Woocommerce for the shop with the Shopkeeper theme.
I want a grid with different sizes of pictures. I would like to be able to click on a picture and navigate to a specific product category. (see example below)
I already tried to use the 'Product Categories' grid, which seemed to be what I want in the first place. But you can only have 1 item in that grid for every Product Category.
What would be the easiest way to become this sort of grid?
Related
Really appreciate your help this one...
How can I display a woocommerce product variation's image as the featured image on the woocommerce single product page?
Alternatively how can I use another image as the product page featured image?
Here's why I need that:
WooCommerce with OceanWP has a neat slider feature that appears on hover over each product listing on the shop page that allows users to cycle through the product's gallery images. It's like a preview and is exactly the user experience I want as the product that I'm selling comes in a variety of colors.
When a user selects a product in the shop archive and clicks-through to the single product page though, I need to display the featured image as a mockup of the product. It's a better user experience because it shows the user already the design they selected on the shop archive page as a product mockup. This helps to visualize and clarify what they're getting.
So I've hidden the thumbnail gallery using CSS and set the woo product variation images to an image of the mockup in the right colour. When the user selects a 'colour' option, the woo gallery slider changes accordingly and that's the right user experience too.
My problem is simply when the user first clicks-through from the shop archive to the single product page, instead of showing the product's default featured image, show one of the product variation images, which are mockups...or at least show another image altogether so the user sees the mockup, selects the color option and the user experience is simple.
Any ideas on how I can do this?
Thanks a mil for any help :)
We have a problem with a new webshop we want to put online. We want to display the 2nd image on a hover on desktop for our store. It works on the default shop page (https://www.festivalapparel.nl/shop/) but not on our homepage (https://www.festivalapparel.nl/). It has been created with the building block from woocommerce: featured item. It looks like it does not load two images per item, so it can't switch it.
In summary: it works on the preset shop page but not on the homepage using their building block, we also want it to help there. Thanks!
Replace your page builder block with this shortcode bellow:
[products limit="10" columns="5" best_selling="true"]
If you want to display best sellers manually you could use featured function with shortcode bellow. To set featured products there is a star icon in your woocommerce admin products list so you could just click on it and product will be featured.
[products limit="10" columns="5" visibility="featured" ]
I am working on a shopping cart WordPress site and I would like to customize the subcategory page. Here is a link to my shopping cart.
When you click on that link you see only the product category images. Originally, you saw both the image and title, but that's not how I wanted it to be so I edited the content-product_cat.php file.
When you click on the Product Category it takes you to all the products that pertain to that category and is displayed the same way the product categories are - just the image. However, I want it to only display the titles, no images, just the titles. I understand that it's just showing the images because it's also using the content-product_cat.php file.
How can I make it so that only the product category shows images but the actual products show just the titles?
Here is an example of what I want my site to do.
I am new to building eCommerce and WordPress sites so the more specific you are, the better.
Any help is appreciated!
when I set woocommerce setting for shop to display categories. the layout is ugly yet when the same setting is display products.the layout is fine. how can I have a good layout with display categories option set?
If I understand the question correctly, you want to display categories among the products in the archive view.
If that is the case, you should use the content-product_cat.php template in wp-content/plugins/woocomemrce/templates/. Copy this template into your theme's woocommerce folder(create it if it does not exist).
I am trying to create a Wordpress image gallery which does a few things that no one plugin seems to do on its own.
Basically I want to:
1. split the media library into categories/albums
2. display every image from those albums mixed together on the same page in a masonry style layout (An image from category a, then an image from category b, then an image from category c etc etc)
3. bring up a lightbox when an image is clicked that only cycles through images from the same category
The difficulty is that I'm not sure where to begin, so I'm looking for some ideas on how I should approach it. Would starting with a plugin which separates the media library into categories/albums be a good place to start? Could the native Wordpress masonry/tiled gallery and lightbox be adapted to do the rest?
Update: I've registered new taxonomy which applies to attachments, so the images now belong to categories
Really sorry for not giving a better starting point!
To sum my understanding of what you need: You need posts, with attached images that belong to categories.
Replying to your points:
Forget about splitting the media library;
You just loop through the posts;
You install a simple lightbox gallery plugin and only loop the posts you need.
To accomplish this:
Register a custom post type (which I saw you already did);
Create your custom posts, associate the images and give them a category;
Install masonry (doesn't matter the way it looks right now) and loop the featured images;
With a lightbox plugin, pass the ID of the clicked item, go get the category and loop it so users can check the images of the same categories.