I am currently working on a Wordpress website that supports WooCommerce. I've created a product, and I've uploaded a featured image and other photos for the gallery. But there is a problem i can't figure out. It doesn't matter how big the photo is, if I put the cursor on it, it zooms almost 200%, and that's too much. Does anyone know how to reduce (or remove) the zoom feature? I've been to "sinlge-product/product-image.php" but it seems I can't find any zoom option in the code:
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.14
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $woocommerce, $product;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title,
'alt' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
Thank you!
Copy / Paste this code to functions.php on your child theme. Tested and approved ;)
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
add_filter( 'woocommerce_gallery_full_size', 'change_magnifier_lightbox_image_size', 20, 1 );
function change_magnifier_lightbox_image_size( $size ){
$thumbnail_id = get_post_thumbnail_id( get_the_id() );
$attachment = wp_get_attachment_metadata( $thumbnail_id, FALSE );
// Always return a value in a filter hook
return ( $attachment['width'] > 3071 || $attachment['height'] > 3071 ) ? 'preview' : 'large';
}
Related
I would like to have the respective short description of the product / article displayed in WOOCOMMERCE in the order overview "Order-Details-Item" (template / woocommerce / order / order-details-item.php) about the product Permalink.
I found the following code on the web to allow a brief description.
Here is the code for this:
<div class="product_short_description_cart_default">
<?php
$product_id = $_product->get_parent_id();
$product = wc_get_product($product_id);
echo $product->get_short_description();
?>
</div>
But how do I incorporate them into my order-details-item.php file?
Here is the code for this:
<?php
/**
* Order Item Details
*
* This template can be overridden by copying it to yourtheme/woocommerce/order/order-details-item.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.7.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! apply_filters( 'woocommerce_order_item_visible', true, $item ) ) {
return;
}
?>
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'woocommerce-table__line-item order_item', $item, $order ) ); ?>">
<td class="woocommerce-table__product-name product-name">
<div class="order-details-item-default-product-name-left">
<?php
echo '<div class="product-image">'.$product->get_image(array( 80, 80)).'</div>';
$is_visible = $product && $product->is_visible();
$product_permalink = apply_filters( 'woocommerce_order_item_permalink', $is_visible ? $product->get_permalink( $item ) : '', $item, $order );
?>
</div>
<div class="order-details-item-default-product-name-right">
<?php
echo apply_filters( 'woocommerce_order_item_name', $product_permalink ? sprintf( '%s', $product_permalink, $item->get_name() ) : $item->get_name(), $item, $is_visible ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$qty = $item->get_quantity();
$refunded_qty = $order->get_qty_refunded_for_item( $item_id );
if ( $refunded_qty ) {
$qty_display = '<del>' . esc_html( $qty ) . '</del> <ins>' . esc_html( $qty - ( $refunded_qty * -1 ) ) . '</ins>';
} else {
$qty_display = esc_html( $qty );
}
echo apply_filters( 'woocommerce_order_item_quantity_html', ' <strong class="product-quantity">' . sprintf( '× %s', $qty_display ) . '</strong>', $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, false );
wc_display_item_meta( $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_order_item_meta_end', $item_id, $item, $order, false );
// SKU mit Sprachdatei
echo '<div class="cart-sku-item">' . __( "SKU:", "woostroid") . $product->sku . '</div>';
?>
</div>
</td>
<td class="woocommerce-table__product-total product-total">
<?php echo $order->get_formatted_line_subtotal( $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</td>
</tr>
<?php if ( $show_purchase_note && $purchase_note ) : ?>
<tr class="woocommerce-table__product-purchase-note product-purchase-note">
<td colspan="2"><?php echo wpautop( do_shortcode( wp_kses_post( $purchase_note ) ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></td>
</tr>
<?php endif; ?>
Can you please help me there!
Just place below code in functions.php
add_filter( 'woocommerce_order_item_name', 'display_product_title_as_link', 10, 2 );
function display_product_title_as_link( $item_name, $item ) {
$_product = get_product( $item['variation_id'] ? $item['variation_id'] : $item['product_id'] );
$_var_description ='';
if ( $item['variation_id'] ) {
$_var_description = $_product->get_variation_description();
}else{
$_var_description = $_product->get_short_description();
}
return $_var_description.'<br>'.$item_name;
}
Thanks for your efforts and for the great code.
But did we talk past each other ?!
So I would like to have the following displayed next to the product image:
Product short description
Product name with link
Design / (variants of products)
Item number (SKU NUMBER)
points 2 and 3 and 4 work.
I only miss the first point (product short description) (echo $ product-> get_short_description ();)
Excuse me for my first bad description.
How can I add a CSS class for the product attribute in Woocommerce? For Example, I need to display individual icons for each attribute via :before & :after pseudoelements.
Thanks in advance!
P.S. Sorry fot delay
I thought that you are familiar with the syntax of Woocommerce. Also Woocommerce use actions & hooks to display some information. For example to display attributes on the product page. I want to display Woocommcerce product attributes with individual icons. Now I added php code after the hook in content-product.php (woocomemrce template to display products in loop)
/**
* woocommerce_after_shop_loop_item_title hook.
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
/** ATTRIBUTES BEGIN **/
// Get the attributes
$attributes = $product->get_attributes();
// Start the loop
foreach ( $attributes as $attribute ) :
// Check and output, adopted from /templates/single-product/product-attributes.php
if ( $attribute['is_taxonomy'] ) {
$values = wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) );
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
} else {
// Convert pipes to commas and display values
$values = array_map( 'trim', explode( WC_DELIMITER, $attribute['value'] ) );
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
}
endforeach;
/** ATTRIBUTES END **/
By this method I can display product attributs and add icon to the attributes. But I can add only one icon, because in Woocommerce there is no functionality to add CSS classes foe each attribute.
I have understood that you need to add different classes (for CSS) for each attribute.
For this you have to edit the following php file in woocommerece. In your wordpress go to wp-content\plugins\woocommerce\templates\single-product and open product-attributes.php file.
Replace following code.
Note:Either you can edit in plugin directly or you can copy this file into your child theme.
<?php
/**
* Product attributes
*
* Used by list_attributes() in the products class.
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-attributes.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/
* #author WooThemes
* #package WooCommerce/Templates
* #version 3.1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<table class="shop_attributes">
<?php if ( $display_dimensions && $product->has_weight() ) : ?>
<tr>
<th><?php _e( 'Weight', 'woocommerce' ) ?></th>
<td class="product_weight"><?php echo esc_html( wc_format_weight( $product->get_weight() ) ); ?></td>
</tr>
<?php endif; ?>
<?php if ( $display_dimensions && $product->has_dimensions() ) : ?>
<tr>
<th><?php _e( 'Dimensions', 'woocommerce' ) ?></th>
<td class="product_dimensions"><?php echo esc_html( wc_format_dimensions( $product->get_dimensions( false ) ) ); ?></td>
</tr>
<?php endif; ?>
<?php
//Here I added a variable for incrementing.
$class_name=1;
?>
<?php foreach ( $attributes as $attribute ) : $class_name++; ?>
<tr>
<th class="my_classname_<?php echo $class_name++; ?>"><?php echo wc_attribute_label( $attribute->get_name() ); ?></th>
<td><?php
$values = array();
if ( $attribute->is_taxonomy() ) {
$attribute_taxonomy = $attribute->get_taxonomy_object();
$attribute_values = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'all' ) );
foreach ( $attribute_values as $attribute_value ) {
$value_name = esc_html( $attribute_value->name );
if ( $attribute_taxonomy->attribute_public ) {
$values[] = '' . $value_name . '';
} else {
$values[] = $value_name;
}
}
} else {
$values = $attribute->get_options();
foreach ( $values as &$value ) {
$value = make_clickable( esc_html( $value ) );
}
}
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
?></td>
</tr>
<?php endforeach; ?>
</table>
If you want to assign the CSS class for eache of the Woocommerce specific attribute value you can use this code:
/** ATTRIBUTES BEGIN **/
// Get the attributes
$attributes = $product->get_attributes();
// Start the loop
foreach ( $attributes as $attribute ) :
// Check and output, adopted from /templates/single-product/product-attributes.php
if ( $attribute['is_taxonomy'] ) {
$values = wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) );
if($attribute['name'] == 'pa_usl_otpuska'){
foreach($values as $value){
$value_classname = $value; // how can I get the value name??
}
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize('<span class="lbl ' . $value_classname . '">'. implode( '</span><span class="lbl ' . $value . '">', $values ).'</span>' ) ), $attribute, $values );
} else {
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
}
} else {
// Convert pipes to commas and display values
$values = array_map( 'trim', explode( WC_DELIMITER, $attribute['value'] ) );
echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
}
endforeach;
/** ATTRIBUTES END **/
For example I have added this code to the Woocomemrce - content-product.php after the hook:
do_action( 'woocommerce_after_shop_loop_item_title' );
And added some CSS code like this:
.lbl.reciept:before{
font-family: FontAwesome;
content: "\f0f6";
padding-right:10px;
color:#FF9F41;
font-size:25px;
}
Since WooCommerce major update 3.0+ the "Purchased" column in backend orders list panel has been removed. This column previously showed a toggle list of items in the order for quick viewing.
How to Get back this "items" column in orders panel?
If there is any hook for that? Any ideas?
Thanks
That appears to have been removed for performance reasons, but you could look at the code that was removed and add it back via the manage_shop_order_posts_columns filter and manage_shop_order_posts_custom_column action.
/**
* Modify the custom columns for orders.
* #param array $columns
* #return array
*/
function so_43719068_shop_order_columns( $columns ) {
// the new column as an array for subsequent array manip
$new_column = array( 'order_items' => __( 'Purchased', 'your-plugin' ) );
$insert_after = 'order_title';
// insert after specified column
if( isset( $columns[ $insert_after ] ) ){
// find the "title" column
$index = array_search( $insert_after, array_keys( $columns) );
// reform the array
$columns = array_merge( array_slice( $columns, 0, $index + 1, true ), $new_column, array_slice( $columns, $index, count( $columns ) - $index, true ) );
// or add to end
} else {
$columns = array_merge( $columns, $new_column );
}
return $columns;
}
add_filter( 'manage_shop_order_posts_columns', 'so_43719068_shop_order_columns', 20 );
/**
* Output custom columns for orders.
* #param string $column
* #param int $post_id
*/
function so_43719068_render_shop_order_columns( $column, $post_id ) {
global $the_order;
if ( empty( $the_order ) || $the_order->get_id() !== $post_id ) {
$the_order = wc_get_order( $post_id );
}
switch ( $column ) :
case 'order_items' :
/* translators: %d: order items count */
echo '' . apply_filters( 'woocommerce_admin_order_item_count', sprintf( _n( '%d item', '%d items', $the_order->get_item_count(), 'woocommerce' ), $the_order->get_item_count() ), $the_order ) . '';
if ( sizeof( $the_order->get_items() ) > 0 ) {
echo '<table class="show_order_items" cellspacing="0">';
foreach ( $the_order->get_items() as $item ) {
$product = apply_filters( 'woocommerce_order_item_product', $item->get_product(), $item );
$item_meta_html = wc_display_item_meta( $item, array( 'echo' => false ) );
?>
<tr class="<?php echo apply_filters( 'woocommerce_admin_order_item_class', '', $item, $the_order ); ?>">
<td class="qty"><?php echo esc_html( $item->get_quantity() ); ?></td>
<td class="name">
<?php if ( $product ) : ?>
<?php echo ( wc_product_sku_enabled() && $product->get_sku() ) ? $product->get_sku() . ' - ' : ''; ?><?php echo apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ); ?>
<?php else : ?>
<?php echo apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ); ?>
<?php endif; ?>
<?php if ( ! empty( $item_meta_html ) ) : ?>
<?php echo wc_help_tip( $item_meta_html ); ?>
<?php endif; ?>
</td>
</tr>
<?php
}
echo '</table>';
} else echo '–';
break;
endswitch;
}
add_action( 'manage_shop_order_posts_custom_column', 'so_43719068_render_shop_order_columns', 10, 2 );
I set up a WooCommerce Theme. Now I'm trying to visualize the Product Gallery Images on the Product Detail-Pages with Flexslider.
I implemented the ".js" and the Styles that are needed.
But Im not quite sure where to put in which Code. Im guessing I have to manipulate the "product-image.php" inside the "WooCommerce/single-product"-Folder.
This is what I have done so far inside that File:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '
<div class="flexslider">
<ul class="slides">
<li>
%s
</li>
</ul>
</div>', $image_link, $image_caption, $image ), $post->ID );
I want it to look something similar to this:
http://www.twothirds.com/product/aruba_sand/
Any Ideas of what am I doing wrong so far?
Looking forward for any help :)
Custom Flexslider for Woocommerce.
* This template needs be overridden by copying it to yourtheme/woocommerce/single-product/product-thumbnails.php. replace the contents of this template with code provided. Woocommerce Version 2.5.5 April 2016.
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
?>
<div id="shop-slider" class="flexslider">
<ul class="slides"><?php
foreach ( $attachment_ids as $attachment_id ) {
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
$image_title = esc_attr( get_the_title( $attachment_id ) );
$image_caption = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_single' ), 0, $attr = array(
'title' => $image_title,
'alt' => $image_title
) );
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<li>%s</li>', $image ), $attachment_id, $post->ID, $image_class );
$loop++;
}
?></ul>
</div>
<?php
}
Then follow this tutorial to get flexslider going http://flexslider.woothemes.com/.
Hope this helps.
I need to change the link code that is being used for external products for woo commerce.
This is the code that generates the product image:
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.3
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $woocommerce;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count = count( get_children( array( 'post_parent' => $post->ID, 'post_mime_type' => 'image', 'post_type' => 'attachment' ) ) );
if ( $attachment_count != 1 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
So I just want to change out the image link to the external link url so if someone clicks on the picture, they will go to the external link instead of a blow up of the image
The code to do so is within the add to cart code, but I don't know how to apply it to the image:
<?php
/**
* Loop Add to Cart
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
switch ( $handler ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('%s', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
?>
Sorry I'm such a nube, but I can't figure out how to get the link code the same as the 'add to cart' link code, thanks for the help!
Why not copy product-image.php to your theme or template (this will overwrite the Woocommerce default) and then change the following:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
Where it says
<a href="%s"
Replace %s with your link, or you can register a custom post field and have a different link for each of your products.
You can ignore the "add to cart" code if this is all you are trying to accomplish. I might have misunderstood - so let me know if it's still unclear.