So I got the Cross-Sells to show on my product page but I had to use this [wcsp_cross_sell] the other code did not work for me. But now I have really big product images. How can I style them so that they appear like the Upsells right below them on this page? The upsells heading title is You may also like…
https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long
I would also like to change the title from Cross Sells… to Other Bundles you may like…
This is the code that did not work for me. [wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”5″ display_columns=”3″ title=”Hello title..” product_id=”Product ID”]
Hi Karenlg,
if you copied the shortcode [wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”5″ display_columns=”3″ title=”Hello title..” product_id=”Product ID”]
then please replace all ( ” ) around the attribute values in shortcode.
It’ll fix the issue.
When I put this
[wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”4″ display_columns=”4″ title=”Other Bundles you may like” product_id=”Product ID”]
It does not pull anything. I’m not sure what I am doing wrong. I can get them to pull with this.
[wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”4″ display_columns=”4″ title=”Other Bundles you may like”]
But as you can see it does not put them in rows. I would like 4 to show in one row and they all be the same size as the upsell you see below. I have 6 products in the Cross-Sell section.
My Theme gave me this CSS to add to make the images the same size but it is not working 100%. It did make the image size smaller but not the same size as the upsell images.
.single-product .woocommerce li.product .entry-featured,
.single-product .woocommerce li.product .entry-featured a {
width: auto;
display: inline-block;
}
.single-product .woocommerce li.product .entry-featured img {
min-width: 0;
}
.single-product.woocommerce li.product .star-rating-container,
.single-product.woocommerce-page li.product .star-rating-container {
position: absolute !important;
}
You can view the changes I made here. https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/
Hey, thank you for this important clue. When I remove that product_ID parameter, the plugin works for me – no quotation marks – except that it only shows the title UP TO the first space (blank character). Image sizes are ok without any added CSS. I still get the warning message when there is no cross sell product, but I can make that go away by removing the sizeof() test in the PHP IF statement.
I don’t think you’re doing anything wrong. I think logicfire should check the PHP more closely.
Thanks.
Hi,
First of all with this shortcode
[wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”5″ display_columns=”3″ title=”Hello title..” product_id=”Product ID”]
I asked to replace ( ” ) because when you copy direct from webpage sometime quote marks converts to different character. (” “) like check these two both are quotes but different. So I asked to delete and replace or re-add quote marks around the attribute values.
Second is this plugin don’t use any css of itself. It take woocommerce default css to style the display of products. So you can use your own theme’s or custom css to style them.
Third is product_id attribute. You need to replace the product_id=”Product ID” to product_id=”Some product’s ID of which crosssells you want to display”. This attribute need a product id and if you just don’t use product_id attribute it just take current product’s id and show its crosssells.
Hope this clears it all. If still have any issues please let me know.
Thanks
🙂
Just update the plugin to so you can add additional classes to main wrapper <div> of crossells. That’ll help you to match styles of the theme you using.
Hey logicfire,
So I updated the plugin but it still does not seem to follow the Upsell look. I spoke with my theme and they provided me with the following CSS.
.single-product .woocommerce li.product .entry-featured,
.single-product .woocommerce li.product .entry-featured a {
width: auto;
display: inline-block;
}
.single-product .woocommerce li.product .entry-featured img {
min-width: 0;
}
.single-product.woocommerce li.product .star-rating-container,
.single-product.woocommerce-page li.product .star-rating-container {
position: absolute !important;
}
.cross-sells.woocommerce li.product {
width: 22%;
}
This worked perfectly. The only thing I am having trouble with now is the Stars (Review Stars). As you can see they are showing twice. Below the product name and on the product picture. I am not sure why. I do not want them on the product image. Can you help me remove them from going over the product image?
Ok I take it back they are not showing perfectly with that code after I sent this message I viewed it on my mobile device and they are showing way to small. I just want them to show like the Upsells do on all devices.
Hi karenlg,
This is not plugin related issue. This has to do with your theme styling. Or you have to some extra styling for this section. The styling code above you sent is for desktop version and not mobile responsive.
For the stars to hide. you can use this code.
.cross-sells .entry-featured .star-rating-container.aggregate {
display: none;
}
-
This reply was modified 4 years, 9 months ago by
logicfire.
-
This reply was modified 4 years, 9 months ago by
Jan Dembowski.
I asked to replace ( ” ) because when you copy direct from webpage sometime quote marks converts to different character. (” “) like check these two both are quotes but different. So I asked to delete and replace or re-add quote marks around the attribute values.
Thank you for the clarification. Very helpful.
Second is this plugin don’t use any css of itself. It take woocommerce default css to style the display of products. So you can use your own theme’s or custom css to style them.
Thx also for this; seems to work this way in my case.
Third is product_id attribute. You need to replace the product_id=”Product ID” to product_id=”Some product’s ID of which crosssells you want to display”. This attribute need a product id and if you just don’t use product_id attribute it just take current product’s id and show its crosssells.
Ah, but that’s the goal, isn’t it? The point of this plugin is to show the cross-sells on the single product page, no? So the default – omitting the product_id attribute – works well for that. At least for me.
Thx again. Will post back if I see any other issue.
Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
Side note: @logicfire I removed part of your reply. These forums are not for soliciting work, please don’t use them for that here.
I’m not accusing anyone of any ill will but that talk will get this topic closed.
Hi @jdembowski ,
I didn’t know about that. I’ll keep that in mind for future.
Thanks
Thank you @logicfire that worked great to get the stars off of the Cross-Sell product image.
I am still having trouble getting the images to the correct size on the mobile. They look great on a computer with the code the theme gave me but they are really small on a mobile device. I am working with my theme. I will let you know if we figure it out. Do you have any other suggestions? Again we are trying to make them look like the Upsells which are located in the Accessories tab now on all devices.
use class=”cols-4″ in the shortcode. It’ll work for your theme.
OMG!! You are amazing!!!
This is what I used and it worked
[wcsp_cross_sell display_columns=”4″ class=”cols-4″ title=”Similar Products”]
I was even able to take the CSS the theme gave me out. I did not need it.
/* Makes Cross-Sell Image size same as UpSells */
.single-product .woocommerce li.product .entry-featured,
.single-product .woocommerce li.product .entry-featured a {
width: auto;
display: inline-block;
}
.single-product .woocommerce li.product .entry-featured img {
min-width: 0;
}
.single-product.woocommerce li.product .star-rating-container,
.single-product.woocommerce-page li.product .star-rating-container {
position: absolute !important;
}
/* Makes Cross-Sell Image size same as UpSells 4 Rolls */
.cross-sells.woocommerce li.product {
width: 22%;
}
Thank you soooo much!!
