Center Upsell

Hi,

Do you always add 2 products to upsells? If so, please add following code to bottom of Functions.php file of your child theme

/**
 * Change number of upsells output
 */
add_filter( 'woocommerce_upsell_display_args', 'wc_change_number_related_products', 20 );

function wc_change_number_related_products( $args ) {
 
 $args['posts_per_page'] = 2;
 $args['columns'] = 2; //change number of upsells here
 return $args;
}

Then add following code to Quick CSS field in Enfold theme options > General Styling

#top.single-product .up-sells .products.columns-2 { width: 50%; margin: auto; }
#top.single-product .up-sells .products.columns-2 .product { width: 49%; }
#top .upsells.products h2 { text-align: center; } 

Best regards,
Yigit

Hi,

You would need to change the code to following one to display 7 columns

/**
 * Change number of upsells output
 */
add_filter( 'woocommerce_upsell_display_args', 'wc_change_number_related_products', 20 );

function wc_change_number_related_products( $args ) {
 
 $args['posts_per_page'] = 7;
 $args['columns'] = 7; //change number of upsells here
 return $args;
}

and use following CSS code instead

#top .product_column_4 .upsells .products .product {
    width: 13.4%;
}
#top .upsells.products h2 { text-align: center; } 

Result should be as following – https://imgur.com/a/TRDKsrV

Best regards,
Yigit

Hi,

Would you like to display 7 products in 2 column layout? If so, you would need to change the code in functions.php file to following one

/**
 * Change number of upsells output
 */
add_filter( 'woocommerce_upsell_display_args', 'wc_change_number_related_products', 20 );

function wc_change_number_related_products( $args ) {
 
 $args['posts_per_page'] = 7;
 $args['columns'] = 2; //change number of upsells here
 return $args;
}

If that too does not help, can you post a screenshot and show the changes you would like to make so we can make sure that we are on the same page? :)

Best regards,
Yigit

Hi,

I now understand the changes you would like to make however unfortunately such customization would be out of the scope of our support I am afraid. If that is really important for you, please consider to hire a freelance developer for the task :)

Best regards,
Yigit