[Resolved] Woo images not aligning and rendered properly.

[Author]

Posts

[PrakharM1203]

hi,
you probably overlooked my reply on previous page. it's below:

"ok the problem seems to be coming from views css i think. yith support has added the following css:

.js-wpv-view-layout .woocommerce-product-gallery {
opacity: 1 !important;
width: 100% !important;
}

.js-wpv-view-layout .woocommerce-product-gallery .onsale {
display: none;
}

.js-wpv-view-layout .out-div span.onsale {
left: 15px;
}

now i will try to make it look beautiful. I am watching some css tutorials.
Please check your css files."

and then yith theme support gave me the following css:

"<ul class="products">

<div class="product-wrapper border"></div>

<ul class="products">

<div class="product-wrapper border">[toolset-types-image-shortcode-goes-here]</div>

<div class="product-wrapper border">[toolset-types-image-shortcode-goes-here]</div>

<div class="product-wrapper border">[toolset-types-image-shortcode-goes-here]</div>

"

now it started looking what i want but not exactly. I want to make it like when wp views is not activated.
and also the star rating shortcode is not appearing on pages like:
check url
hidden link

yith support also added this below css:

.vc_row .wpb_wrapper > .onsale {
display: none;
}
.vc_row .wpb_wrapper .out-div {
position: relative;
}
.vc_row .wpb_wrapper .out-div .onsale {
background-color: red;
padding: 2px;
color: white;
}

but i think its related to visual composer or wp bakery
could you please guide me further.

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/star-rating-shortcode-is-not-appearing-as-expected/

[Christian Cox]

I want to make it like when wp views is not activated.
When you activate the WooCommerce Views template for Products, you must create the code yourself using HTML and CSS. There is no automatic import process where the design from your theme files is automatically imported into the Toolset template system. If you want to recreate the design from the original theme template without Views active, it will require a significant knowledge of HTML, CSS and possibly JavaScript. First, deactivate Views and refresh the page on the front-end of the site. Next, copy the HTML markup for the main content area, generated by the theme. Then you can recreate that markup structure in the Views template, using Views shortcodes. Reactivate the Views template once you have the markup in place.

and also the star rating shortcode is not appearing on pages like:
Let's this into a different ticket. Our support policy is to address one topic per ticket to help keep things organized.

[PrakharM1203]

i want to set height and width property in the image shortcode:
<a href="[wpv-post-url]">[wpv-woo-product-image size='shop_single' height='250px' width='250px']
is this the right way?

[Christian Cox]

No, the wpv-woo-product-image shortcode does not support height and width attributes. You can define custom sizes with code and apply those sizes. See the documentation here:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image

For example, register your own custom image sizes in code, like "shop_custom_square_image":

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
add_image_size ('shop_custom_250_square', 250, 250, true);

function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'shop_custom_250_square' => __( 'Shop Custom 250 Square' ),
  ));
}

Then in the product image shortcode:

[wpv-woo-product-image size="shop_custom_250_square"]

[PrakharM1203]

if i put the shortcode in to a div and set maxheight and maxwidth will it work?

[Christian Cox]

if i put the shortcode in to a div and set maxheight and maxwidth will it work?
It is possible to place a Toolset shortcode inside a div and set CSS properties on that div, yes. Predicting how those CSS properties will interact with your theme's CSS is not something I can offer with confidence. It's best to place it in the browser and test it out. Then if there are problems, I can take a look and offer advice. I hope this helps 🙂

[PrakharM1203]

i want to send you the theme files so that you can check and tell me how to add css on product and archive page.
toolset views are of no use without proper css.
i am stuck i am in final stages of my site and my client site. i have 3 sites to build using the toolset and yith themes.

[Christian Cox]

i want to send you the theme files so that you can check and tell me how to add css on product and archive page.
I can show you where to add custom CSS in Toolset. You can find a CSS editor in the Content Template editor, or in the WordPress Archive editor. See the attached screenshots. The CSS you add here will be automatically injected into the appropriate pages.