De standaard bedankpagina van WooCommerce ziet er een beetje leeg uit en dat is de reden dat een klant aan mij vroeg of we daar niet productfoto’s konden plaatsen.
Ik ben even voor haar op onderzoek uit gegaan en dat is mogelijk! Hieronder geef ik je een kleine uitleg hoe ik dat gedaan heb.
Via Google heb ik dit stukje code gevonden:
// Productafbeeldingen op de bedankpagina van WooCommerce tonen
add_filter( 'woocommerce_order_item_name', 'order_received_item_thumbnail_image', 10, 3 );
function order_received_item_thumbnail_image( $item_name, $item, $is_visible ) {
// Targeting order received page only
if( ! is_wc_endpoint_url('order-received') ) return $item_name;
// Get the WC_Product object (from order item)
$product = $item->get_product();
if( $product->get_image_id() > 0 ){
$product_image = '<span style="float:left;display:block;" class="productfotothankyou">' . $product->get_image(array(48, 48)) . '</span>';
$item_name = $product_image . $item_name;
}
return $item_name;
}
(dubbelklik in de code om alles te selecteren)
Deze code plak je in de functions.php van je thema. Ik doe dit meestal gewoon helemaal onderaan de pagina. Zorg ervoor dat je altijd een childtheme gebruikt!
De functions.php kun je met FTP downloaden. Daarna pas je het bestand aan en dan kun je hem via de FTP weer naar de server kopiëren.
Geen idee waar ik het over heb? Lees dan dit artikel over FTP, en dit artikel voor het childtheme
Het eerste resultaat
Dit ziet er natuurlijk nog een beetje gek uit. Dus nu wordt het tijd om de foto’s te gaan stijlen. Dit kun je doen door een stukje code aan de style.css van je theme toe te voegen.
Dit stuk code heb ik gebruikt:
table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details { background-color: #f0f0f0;}
span.productfotothankyou img { width:105px;}
tr.woocommerce-table__line-item.order_item strong.wc-item-meta-label { clear: none!important;}
span.productfotothankyou { margin-right: 25px;}
(dubbelklik in de code om alles te selecteren)
Wanneer je deze code toevoegt aan de style.css zal het geheel er waarschijnlijk op deze manier uit komen te zien:
Je kunt hier zelf natuurlijk een andere achtergrondkleur kiezen of nog meer aanpassingen maken.
Productfoto’s in de e-mail
De volgende vraag van mijn klant was… Kunnen die foto’s dan ook niet in de e-mail erbij komen te staan? Je raadt het al… Ik ging weer even op onderzoek uit en snel had ik weer een stukje code gevonden die ik daarvoor kon gebruiken.
Dit is het stukje code en deze plaats je dan onderin de functions.php erbij.
/**
* Display Product Image in WooCommerce Order Emails
*
* @author James Kemp (Iconic)
*/
add_filter( 'woocommerce_email_order_items_args', 'iconic_email_order_items_args', 10, 1 );
function iconic_email_order_items_args( $args ) {
$args['show_image'] = true;
return $args;
}
(dubbelklik in de code om alles te selecteren)
En in de e-mail komt het er dan op deze manier uit te zien:
De code snippets heb ik gevonden via deze pagina’s:
https://stackoverflow.com/questions/53618018/add-the-product-thumbnail-on-woocommerce-thankyou-page
https://stackoverflow.com/questions/50668983/show-product-images-on-woocommerce-new-order-email-and-completed-order-email
Gelukt? Vragen?
Is het je gelukt om met deze uitleg de foto’s erbij te krijgen? Of loop je toch nog ergens tegenaan? Laat hieronder een berichtje achter en dan help ik je gewoon even op weg 🙂