Working on this crochet bikinis website, please look at the homepage.
I am using the simple shortcode provided by Woocommerce to display the products.
[product_category category="" per_page="" columns="" orderby="" order=""]
But I noticed in responsive mode that the product columns "shrink". They all stay on the same row and just become "smaller". Usually in responsive mode, each product column should take 100% width, and all products should go one per row, displaying one on top of each other. Or at least that's the way I would prefer to have it.
Questions:
-Is this caused by the shortcode itself?
-Is there a different shortcode I could use to achieve my expected result (just for the responsive mode)?
-Any other way I could workaround this without touching CSS?
Thank you
Related
I am using woocommerce and wordpress for a small online shop. To display the products I use the woocommerce shortcode like this.
[products category="Keys" limit="2"]
The problem is that the result being displayed on the screen is too large.
How do I resize it? Do I need to add my own CSS or are there shortcode flags where I can add height and width parameters? In the attached screenshot you can see the displayed image is too wide and very long.
HOw do I resize the section that is displayed using the shortcode?
Here you can find the complete list for the attributes of the WooCommerce [products] shortcode.
You can set the columns attribute by increasing the number of columns to 4 or 5 (or more) so that you have the smallest product block:
[products category="Keys" limit="2" columns="5"]
If that's not enough, you'll need to add CSS rules.
I'm unsure if this question is relevant on stackoverflow, but I've looked almost everywhere else.
I'm looking to create a a product display, containing 6 products, on the right hand side of a picture like this example.
I'm hoping some of you have some know-how you'd like to share with me on this.
Thanks in advance
A.P.
The easiest way to do that is add a left sidebar to your shop page, which can be typically done through your theme, and then add an image widget to that sidebar. The last thing to do is change the CSS code of your shop to make the whole page full-width and then make the sidebar 50% of the parent div.
This approach has the advantage that the sidebar is showed after the products in mobile mode (by default), so mobile visitors will first see the products.
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.
I'm making a WordPress website with WooCommerce and I need to resize the product thumbnails in the display products (category) page.
In particular I have this situation:
And I'd like to have a page like this:
Is it possible? I've checked that the CSS class should be img.attachment-shop_catalog.wp-post-image and I've tried with -webkit-transform:scale(1.2); but my product image thumbnails overlap. It's not a problem of WooCommerce images settings (the "force hard crop" option is disabled), so I think I have to add a custom CSS. Could you help me to fix this?
Thanks in advance!
I would have checked all surrounding classes cause it is probably limited by them, or there is padding-right set on outer container.
I would have tried to find (using Chrome possibilities) and try first to locally resize them and product container in CSS.
Is there any word-press widget/plugin available which can switch images in a div or a frame automatically with a time interval. ?
My requirement is to have a div or a frame which can display images one at a time and move to the next image after a time interval automatically.
One of the similar example is the "Top News Section" in bbc website.(www.bbc.co.uk).
If there is no plugin from word-press, let me know whether this can be achieved by java-script or i need to use some flash plugin for that?
If you need a plugin than please have a look here.
http://5wpthemes.com/we-recommend/
Also from your wordpress dasboard, go to Plugins - Add New and search for desired plugin.