BlueOwlCreative » Topic: Woocommerce product widget acting weird http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/feed/ Sat, 18 Jul 2026 03:43:25 +0000 http://bbpress.org/?v=2.5.3-5249 en-US http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24879 <![CDATA[Woocommerce product widget acting weird]]> http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24879 Thu, 19 Nov 2015 03:03:18 +0000 lmzan Hi
In my Fortuna theme I installed Woocommerce and in the footer I’m showing Fortuna Latest Posts widget in one column and Woocommerce Products widget in another column.
In most of the images they behave as expected, showing small thumbnails and texts.
But when I’m in the blog area, viewing a post for example, the products thumbnails get bigger and ruin the layout.
Debugging and comparing the CSS in both generated pages, in the problem page (blog) there’s a missing section of the Woocommerce CSS. Everything is the same, until we get to the <ul class=”product_list_widget”>, the list that holds the images and texts from product to be shown. From this point, in the blog page, there’s a missing segment of CSS:

.woocommerce ul.cart_list, .woocommerce ul.product_list_widget {
    list-style: outside none none;
    padding: 0px;
    margin: 0px;
}

Then in the

  • markup it’s missing this:

    .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li {
	padding: 4px 0px;
	margin: 0px;
	list-style: outside none none;
}

    In the markup it’s missing this:

    .woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a {
	display: block;
	font-weight: 700;
}

    This CSS rules above are from http://../site/wp-content/plugins/woocommerce/assets /css/woocommerce.css?ver=2.4.10 :1

    Finally, in the markup, that holds the bigger thumbnail, it’s missing this:

    .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img, .woocommerce-page ul.cart_list li img, .woocommerce-page ul.product_list_widget li img {
	float: left !important;
	width: 56px !important;
	background: #FFF none repeat scroll 0% 0%;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 2px;
	box-shadow: none !important;
	margin-left: 0px !important;
	margin-right: 14px !important;
	border-radius: 1px !important;
	transition: all 0.2s linear 0s;
}

    This is from http://divan.com.br/site/wp-content/themes/fortuna/stylesheets/woocommerce.css?ver=4.3.1 :912

    Sorry if I’m not clear enough, but is there something I could do to try to find the cause of this error?

    Thanks

    • ]]>     http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24901 <![CDATA[Reply To: Woocommerce product widget acting weird]]> http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24901 Thu, 19 Nov 2015 16:44:09 +0000 BlueOwl Hi there,

    The reason is simple, you are no longer on a woocommerce template when being on the blog page. Basically the custom woocommerce CSS is made to work only on Woocommerce pages! You can try adding this to your CSS:

    #footer ul.cart_list li img, #footer ul.product_list_widget li img, #footer ul.cart_list li img, #footer ul.product_list_widget li img {
	float: left !important;
	width: 56px !important;
	background: #FFF none repeat scroll 0% 0%;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 2px;
	box-shadow: none !important;
	margin-left: 0px !important;
	margin-right: 14px !important;
	border-radius: 1px !important;
	transition: all 0.2s linear 0s;
}
    ]]>     http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24916 <![CDATA[Reply To: Woocommerce product widget acting weird]]> http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24916 Thu, 19 Nov 2015 18:04:20 +0000 lmzan Wow!!
    Are you guys always that awesome?
    Even with my messy request, full of wrong HTML codes in the text you got right on the spot.
    It’s working fine now, thanks a lot!

    ]]>     http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24930 <![CDATA[Reply To: Woocommerce product widget acting weird]]> http://blueowlcreative.com/support_wp/forums/topic/woocommerce-product-widget-acting-weird/#post-24930 Fri, 20 Nov 2015 13:13:38 +0000 BlueOwl Anytime, bud, glad I could help.
    Make sure you rate our theme if you are happy with it and want to support us back! :)

    ]]>