Cross Sell Image smaller

Support
#1

Hey
I read the support form “Making “related products” area smaller on product page”
The instruction on this makes all the product images smaller throw out my site. Is there a way just to make the images smaller with they show in the upsell and Cross-sell section. My end goal is to have 5 or 6 products in one line on the Cross-Sell and Upsell section. I know I can make more columns show by changing the number in the Cross-Sell and Upsell columns but it bumps it down to two rows. I was thinking it the images were smaller maybe it would fit them all to one line. Here is a link to my website. https://www.outdoordogsupply.com/product/garmin-alpha-100-tt15-mini-track-train-combo/

As you can see the You may also like… only has 4 right now. How can I get 5 or 6 to show in one line here.

Also is there a way to make these scroll like the product images? If there is more then 5 or 6?

#2

Hello Albert,

Thanks for writing in!

It will require some custom development work as bunch of other variable plays in related/upsell product layout. I suggest you to take a look at following tutorial:

Please note that custom development work falls outside the scope of support we can offer.

Thanks.

#3

Is there away I can get the Cross-Sells to show on the product page? I would also like to change the name over the Upsells and Cross-Sells. For example where it says You many also like… I would like to change that text to Accessories for the upsells and Not what your looking for… for the Cross-Sells.

Here is an example I would like the Cross-Sells where you see the You many also like…
https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/

#4

Hello Albert,

In the mentioned page URL, it is displaying Up-Sell. To modify the text, since you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/UP-SELLS.PHP
// -----------------------------------------------------------------------------
// @version 3.0.0
// =============================================================================

if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

if ( $upsells && x_get_option( 'x_woocommerce_product_upsells_enable' ) == '1' ) : ?>

  <section class="up-sells upsells products cols-<?php echo x_get_option( 'x_woocommerce_product_upsell_columns' ); ?>">

    <h2><?php esc_html_e( 'You may also like&hellip;', 'woocommerce' ) ?></h2>

    <?php woocommerce_product_loop_start(); ?>

      <?php foreach ( $upsells as $upsell ) : ?>

        <?php
          $post_object = get_post( $upsell->get_id() );

          setup_postdata( $GLOBALS['post'] =& $post_object );

          wc_get_template_part( 'content', 'product' ); ?>

      <?php endforeach; ?>

    <?php woocommerce_product_loop_end(); ?>

  </section>

<?php endif;

wp_reset_postdata();

Please do not forget to change the “You may also like” text in the code above.

3] Save the file named as up-sells.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/woocommerce/single-product/.

You may create the folder path since it does not exist in your child theme’s folder yet.

#5

Yes you are correct the Upsells is showing on the product page. I would like the Cross-Sells to show as well. We are wanted to make Upsells Accessories and Cross-Sells Other Bundles. So we need both of them to show on the product page, Cross-Sells and Upsells .

#6

Hello Albert,

For cross-sells, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php
/**
 * Cross-sells
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cross-sells.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @package 	WooCommerce/Templates
 * @version     3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( $cross_sells ) : ?>

	<div class="cross-sells">

		<h2><?php _e( 'You may be interested in&hellip;', 'woocommerce' ); ?></h2>

		<?php woocommerce_product_loop_start(); ?>

			<?php foreach ( $cross_sells as $cross_sell ) : ?>

				<?php
				 	$post_object = get_post( $cross_sell->get_id() );

					setup_postdata( $GLOBALS['post'] =& $post_object );

					wc_get_template_part( 'content', 'product' ); ?>

			<?php endforeach; ?>

		<?php woocommerce_product_loop_end(); ?>

	</div>

<?php endif;

wp_reset_postdata();

Please do not forget to change the “You may be interested in” text in the code above.

3] Save the file named as cross-sells.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/woocommerce/cart/.

You may create the folder path since it does not exist in your child theme’s folder yet.

#7

So I have not tried your instructions yet. They are a little over my head and I’m not sure exactly how to do it. I did find this plugin


And it did put the Cross-Sell on my product pages but they are very large. I would like them the same size as the Upsells. The plug in maker is not helping me resize them. I know it is not your plugin but if you could help me I would greatly appreciate it.

You can view the Cross-Sells on a product page here: https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/

#8

Hello Albert,

The images were too large because the plugin override the image settings. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.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;
}

Hope this helps. Kindly let us know.

#9

That worked pretty good. They are still a little bigger then the UpSells. Is there away to make them the same size and line up side by side like the upsells. Right now they are on top of each other. I would like them in one row next to each other.

#10

Hello Albert,

To display the cross-sell items next to each other, you will need to update your shortcode from [wcsp_cross_sell] to something like [wcsp_cross_sell display_columns="3"] so that it will display 3 columns for the items.

Hope this helps. Kindly let us know.

#11

That did not work. I even tried changing it to 4. You can view it here

https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/

I put it in my description tab.

#12

Hi Albert,

To make your Cross sell a 4 columns, please add this to Theme Options > CSS

.cross-sells.woocommerce li.product {
	width: 22%;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Regretfully, further customization from here is outside of the scope of support that we can offer. You may wish to consult a developer to assist you with this customizations. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding,

#13

This worked. You ROCK!!! Thank you sooooooo much.

#14

Ok. I take that back they are showing up great on all devices but my iPad and iPhone. On mobile they are showing up way to small. On the mobile I would like them to go to rows of two just like the Upsells.

#15

Hello Albert,

Thanks for updating the thread.

Can you please share some screenshot as on my end they seems to be working fine. Please see screenshot. https://cloudup.com/cL0Kbe--8mL

Thanks.

#16

This is what the Cross-Sells look like on mobile.

This is what the Upsells look like on mobile. This is how I would like them to look.

They both show up great on the desktop. I would just like the Cross-Sells to look like the Upsells on the mobile. Also the stars are doing something weird on the Cross-Sells. As you can see they are showing over the picture and under the product. Not sure why. I would like them to only show under like the others.

#17

Hello Albert,

Please find this custom css:

.cross-sells.woocommerce li.product{
  width:22%;
}

You will need to update it and replace with this code;

@media(min-width: 980px){
  .cross-sells.woocommerce li.product{
   width:22%;
  }
}

@media(max-width: 979px){
   .cross-sells.woocommerce li.product{
     width: 48%;
  }
}

Hope this helps. Please let us know how it goes.

#18

Thank you so much for this info. The plugin writer just got back to me and gave me this short code.

[wcsp_cross_sell display_columns=”4″ class=”cols-4″ title=”Similar Products”]

He updated the plugin to work better with x theme. For other this is the plugin: Woocommerce Cross Sell Products Display By Logicfire

I was about to take out the CSS and just use the Short code on the Page Builder.

Thank you so much for your help. You guys rock.

#19

You are most welcome!
We’re glad we were able to help you out.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.