I work on slider for woocommerce product gallery and I don't use/need the generated thumbnails, because I use "dots" for navigation and I want to hide/unload the generated thumbnails by woocommerce gallery.
Firstly, I put this in my theme functions.php file :
remove_theme_support( 'wc-product-gallery-slider' );
And actually, I just put "display:none" in my css file and I make this for the product-thumbnails.php :
// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $post, $product;
$attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) { ?>
<div class="slider product-responsive-thumbnail" id="product_thumbnail_<?php echo esc_attr( $post->ID ); ?>">
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<div class="thumbnail-wrapper">
<?php echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped ?>
</div>
<?php
} ?>
</div>
<?php
}
?>
I would like to disable the generation of thumbnails and its display completely to optimize the loading of my page!
I know that I can totally delete the contents of the file "produtc-thumbnails.php" but it is a bit raw method and I would like to know if this is possible with another less raw method
As #7uc1f3r suggested to me,
First simple solution. Mask in the woocommerce-general.css file like this:
.woocommerce div.product div.images .flex-control-thumbs {
overflow: hidden;
zoom: 1;
margin: 0;
padding:0;
display:none; /* this hide the thumbnails */
}
Second solution, put "false" in the product-thumbnails.php
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $post, $product;
$attachment_ids = false; // This disable the thumbnails
And voilà, now it's up to you to choose the method you want to keep.
Related
I'm trying to achieve something like this, but this code obviously renders the image in the order table which due to the way I want to display the image(s) of purchased products, it doesn't work for my use case.
I'm wondering if it's possible to get the image(s) for the products purchased dynamically and then render them inside a div above the 'order details' section? I'm not a PHP developer so I struggle to know what's needed to achieve this kind of functionality.
Here is the code from the example linked above:
add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );
function ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
/* Return if not checkout page */
if ( ! is_checkout() ) {
return $name;
}
/* Get product object */
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
/* Get product thumbnail */
$thumbnail = $_product->get_image();
/* Add wrapper to image and add some css */
$image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
. $thumbnail .
'</div>';
/* Prepend image to name and return it */
return $image . $name;
}
Am I able to use this with an action like this:
add_action('woocommerce_checkout_before_customer_details', 'displays_cart_products_feature_image');
Sorry for being a novice, any help would be greatly appreciated!
Good I was wondering if i could remove product thumbnail from single product page is product has only one image (i.e the product image only).. So that when user are viewing the product with only one image, they dont need to see the thumbnail but products with product image and Product gallery images, the thumbnail can show up.
Is there a way to achieve this?
I have tried the below but didn't work for me (though the code is to remove the thumbnail entirely);
function remove_gallery_thumbnail_images() {
if ( is_product() ) {
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
}
}
add_action('loop_start', 'remove_gallery_thumbnail_images');
How can i achieve this? disable the thumbnail if product has only one image but display thumbnails if product has multiple images.
Any help is very welcome.
Normally woocommerce doesn't show the gallery when there is no thumbnails in it.
In your case, you can try to use the following:
add_action( 'woocommerce_product_thumbnails', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
global $product;
if( ! is_a($product, 'WC_Product') ) {
$product = wc_get_product( get_the_id() );
}
if( empty( $product->get_gallery_image_ids() ) ) {
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
}
}
Or if the image is included as a thumbnail in the gallery you can replace in the function:
if( empty( $product->get_gallery_image_ids() ) ) {
by the following line:
if( sizeof( $product->get_gallery_image_ids() ) == 1 ) {
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
You can also hide the gallery with an inline CSS:
add_action( 'woocommerce_before_single_product_summary', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
global $product;
if( ! is_a($product, 'WC_Product') ) {
$product = wc_get_product( get_the_id() );
}
if( empty( $product->get_gallery_image_ids() ) ) {
echo '<style> ol.flex-control-thumbs { display:none; } </style>';
}
}
Or if the image is included as a thumbnail in the gallery you can replace in the function:
if( empty( $product->get_gallery_image_ids() ) ) {
by the following line:
if( sizeof( $product->get_gallery_image_ids() ) == 1 ) {
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
All this works on themes that doesn't make related customizations.
I am adding some Custom Controls to the Wordpress Customizer and using those controls to style a slider. I was wondering if there was a better way to implement this than how I've already done. I don't really understand the if statements here, but I know that it works. Any help is much appreciated!
function apache_c_slider_css() {
?>
<style type='text/css'>
<?php
$slider_height = get_theme_mod( 'slider_height', '500' );
if ( ! empty( $slider_height ) ) {
?>
#slider,
.slides,
.slide {
height: <?php echo $slider_height; ?>px;
}
<?php
}
$slider_max_height = get_theme_mod( 'slider_max_height', '100' );
if ( ! empty( $slider_max_height ) ) {
?>
#slider,
.slides,
.slide {
max-height: <?php echo $slider_max_height; ?>vh;
}
<?php
}
?>
</style>
<?php
}
Truthfully, you don't even need the if statement, because you're passing a default value to get_theme_mod(), so it shouldn't ever be empty. Generally speaking, if you don't have a default value, or there's even a chance of an empty value, you'll want to check that condition - but you shouldn't need to here. If you want to, you could combine them into a single if statement like so:
if ( !empty( $slider_height ) || !empty( $slider_max_height ) ){
// Code
}
The pipes || indicate PHP's Logical "OR" Operator, so if either isn't empty, it will proceed. That said, this is probably how I'd modify your current code:
function apache_c_slider_css(){
$slider_height = get_theme_mod( 'slider_height', '500' );
$slider_max_height = get_theme_mod( 'slider_max_height', '100' );
echo '<style type=\'text/css\'>
#slider,
.slides,
.slide {
height: '. $slider_height .'px;
max-height: '. $slider_max_height .'vh;
}
</style>';
}
The declarations will return the theme mod that's set, or 500 pixels and 100 viewport height % by default.
And lastly you can output the whole thing at once.
With that said, "baking in" scripts and styles generally isn't the best way to go about adding CSS and JS in WordPress, especially if you're working on a theme. This kind of CSS is a textbook example of code that should be added with the wp_add_inline_style() function to extend your theme's main styles.
I've combined the shortcodes for checkout and cart onto the Checkout page in two columns to reduce the number of clicks to finish payment.
However, I'm finding that hooks seem to act strangely with this arrangement.
For example, I'm trying to place the cross-sell section below the cart section. On the default cart page, it appears by default. Combining cart and checkout together makes it disappear.
The logical approach is to do this:
function add_cart_collaterals() {
if (is_checkout()) {
add_action( 'woocommerce_after_cart_contents', 'woocommerce_cross_sell_display' );
}
}
add_action('wp', 'add_cart_collaterals');
That did nothing.
Out of desperation, I then copied and adapted the cross-sell.php template code and put it directly into my child theme's functions.php file like this:
/* Display Cross-Sells below cart */
function show_cross_sell() {
if ( $cross_sells ) :
echo '<div class="cross-sells"><h2>';
_e( 'You may be interested in…', 'woocommerce' );
echo '</h2>';
woocommerce_product_loop_start();
foreach ( $cross_sells as $cross_sell ) :
$post_object = get_post( $cross_sell->get_id() );
setup_postdata( $GLOBALS['post'] =& $post_object );
wc_get_template_part( 'content', 'product' );
endforeach;
woocommerce_product_loop_end();
echo '</div>';
else : {
echo 'No cross sells to display';
}
endif;
}
add_action( 'woocommerce_after_cart_table', 'show_cross_sell', 10 );
But, only the else condition runs and displays "No cross sells to display". So maybe it lost scope on the $cross_sells object.
Is there any hope of my being able to achieve this?
WooCommerce support came through with an answer that helped me. I wasn't assigning $cross_sells to anything. I needed to assign it like this $cross_sells = array_filter( array_map( 'wc_get_product', WC()->cart->get_cross_sells() ), 'wc_products_array_filter_visible' );
But I'm still curious to know why the hook action wasn't working.
As to why you couldn't achieve it with the hook, it's probably because of the first line of code in the function that you hooked into that action:
function woocommerce_cross_sell_display( $limit = 2, $columns = 2, $orderby = 'rand', $order = 'desc' ) {
if ( is_checkout() ) {
return;
}
I am trying to get all small medium large and full thumbnail sizes in the SHOP page of woocommerce. I am using the following code in woocommerce.php (duplicate of page.php) to display all products
<?php woocommerce_content(); ?>
Next I have put the following code in functions.php but all in vain
<?php
/**
* Hook in on activation
*/
/**
* Define image sizes
*/
function yourtheme_woocommerce_image_dimensions() {
global $pagenow;
if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
return;
}
$thumbnail = array(
'thumbnail' , 'medium' , 'large' , 'full'
);
$index = array_rand($sizes);
// Image sizes
// Single product image
update_option( 'shop_thumbnail_image_size', $sizes[$index] ); // Image gallery thumbs
}
add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );
?>
I am new to woocommerce and I wish to achieve a masonry layout with these different thumbnail sizes. Any help would be greatly appreciated.
Thank You in advance.
Try following code:
<?php
/**
* Hook in on activation
*/
/**
* Define image sizes
*/
function yourtheme_woocommerce_image_dimensions() {
global $pagenow;
if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
return;
}
$thumbnail = array(
'thumbnail' , 'medium' , 'large' , 'full'
);
$index = array_rand($thumbnail);
// Image sizes
// Single product image
update_option( 'shop_thumbnail_image_size', $thumbnail[$index] ); // Image gallery thumbs
}
add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );
?>