New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Categories shortcode in homepage

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Neighborhood
  • September 5, 2013 at 7:06 am #20026
    midnite
    Member
    Post count: 52

    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!

    September 5, 2013 at 10:46 pm #20194
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    September 7, 2013 at 8:00 am #20432
    midnite
    Member
    Post count: 52
    This reply has been marked as private.
    September 7, 2013 at 8:29 am #20434
    midnite
    Member
    Post count: 52

    sorry, the tag is called < pre >

    looks like it rendered it on my last message.

    September 7, 2013 at 4:22 pm #20457
    midnite
    Member
    Post count: 52

    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!

    September 8, 2013 at 6:16 am #20492
    midnite
    Member
    Post count: 52

    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!

    September 8, 2013 at 11:01 pm #20571
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    September 9, 2013 at 1:00 am #20599
    midnite
    Member
    Post count: 52

    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!

    September 9, 2013 at 1:05 am #20603
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    September 9, 2013 at 1:10 am #20604
    midnite
    Member
    Post count: 52

    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!

    September 9, 2013 at 7:45 pm #20761
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    September 10, 2013 at 2:15 am #20883
    midnite
    Member
    Post count: 52

    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!

    September 10, 2013 at 5:34 pm #21020
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Glad you found another way 🙂

    Thanks for your kind words!

    Thanks,
    laranz.

  • Back to forum
    Posted in: Neighborhood
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register