Categories shortcode in homepage

[midnite]

Hello, I’m trying to add a catagory area on the home page that would look exactly like this:

http://theretailer.getbowtied.com/demo/shortcodes/shop-shortcodes/product-categories/

when i add this shortcode to the classic editor for the home page i get this (attached). I tried adding custom css in theme options:

.woocommerce ul.products li.product-category h3 {
margin-top: 20px;
}
.woocommerce ul.products li.product-category h3 mark {
background: none;
}

but nothing happens. how can i set the attributes for the category thumbnail size as well as styling the amount of products, etc? I want to get rid of all those weird grey backgrounds and lines and make it look clean like the rest of your theme. thanks!

[laranz – SUPPORT]

Hi,

Which theme version you are using? Can you show us a link?

Because if you put that shortcode in a page, it should render like this

http://aloeinfoworld.com/shop/ If you have thumbnail set in Production -> Categories -> Edit -> Add a thumbnail for products at least for parent product categories.

Let me know, what you got.

Thanks,
laranz.

[midnite]

This reply has been marked as private.

[midnite]

sorry, the tag is called < pre >

looks like it rendered it on my last message.

[midnite]

oh, one more thing, see how the blog entries above those categories zoom when you hover over them? is that possible with those category thumbnails also? Thanks again!

[midnite]

not sure how but i fixed it, i think i might of written the shortcode wrong. So now just my last question, if it’s possible to add a zoom hover over the categories, or an overlay of some sort like the green color on Swift Ideas Page over the images.

thanks again!

[laranz – SUPPORT]

Hi,

Glad you fix your first problem.

Try this for the second one, in Custom CSS in Theme Options.

.products li
{
overflow: hidden;
}
.products li:hover img{
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

Let me know, what you got.

Thanks,
laranz.

[midnite]

Hi Laranz, thanks for your help. That worked but it’s affected all product thumbnails. Is there a way to just have it do that hover only on that category section? i tried:

.woocommerce ul.products li.product-category .product:hover img {

but that didn’t work. Thanks again!

[laranz – SUPPORT]

Try this.

.woocommerce .products li
{
overflow: hidden;
}
.woocommerce .products li:hover img{
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

Let me know, what you got.

Thanks,
laranz.

[midnite]

Hi Laranz, that one effects all products as well. So it seems to override the hover on the product thumbnails that normally makes them slide up and show the second image. but i’m hoping there’s a way to put a separate hover action that just effects the category thumbnails. Thanks again!

[laranz – SUPPORT]

Hi,

Try with this, this will eventually work. Include the post id, that makes them stand out unique

.post-7606 .woocommerce .products li
{
overflow: hidden;
}
.post-7606 .woocommerce .products li:hover img{
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

Let me know, what you got.

Thanks,
laranz.

[midnite]

Hi Laranz, thank you!!

That worked but with a small edit. The .post-7606 part was effecting the whole page but not the whole site, which was almost perfect. Instead of .post-7606 i gave the category shortcode an ID, like this

<div id=”mytest1″>[product_categories number=”8″]</div>

and then wrote the custom css like this:

#mytest1 .woocommerce .products li
{
overflow: hidden;
}
#mytest1 .woocommerce .products li:hover img{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

and that worked perfect for just the category thumbnails. Thanks again Laranz, your support is awesome!

[laranz – SUPPORT]

Hi,

Glad you found another way 🙂

Thanks for your kind words!

Thanks,
laranz.