WooCommerce tips og tricks

Hvordan oprettes fragtfrit over beløb i WooCommerce?

Lær her, hvordan du får dine kunder til at bruge flere penge for at spare fragten.

Kunder elsker rabatter! Men da det samtidig er en formindskelse af dit overskud, skal det også for dig være en god forretning. For en webshop kan det give god mening at give rabat i form af fragtfri levering ved køb over et vist kvantum eller beløb.

Sådan gør du

Gå i WooCommerce -> Indstillinger og klik på fanen Forsendelse.

Herefter skal du vælge at redigere den pågældende Forsendelseszone. Hvis du kun har en hedder den typisk bare Lokalt.

Klik på Tilføj forsendelsesmetode og vælg Gratis forsendelse i popup’en.

Godkend ved at klikke på Tilføj…

Vælg den funktion, der passer bedst til dit behov:

• En gyldig fragt-kupon
• Et mindste ordrebeløb
• Et minimumsordrebeløb ELLER kupon
• Et minimumsordrebeløb OG kupon

Sørg for at den nye forsendelsesmetode er aktiv. Og du skulle nu gerne få både gladere kunder og øget omsætning!

Tilpasse Woocommerce produktsøgning

Hvis du gerne vil ændre udseendet af WooCommerces egen produktsøgning, så kan det gøres nemt med et filter.

Med denne lille kodestump kan du overstyre den normale produktsøgning, den der aktiveres med widgeten WooCommerce Produktsøgning (Product Search). Du tilføjer den enten til dit temas functions.php eller dit eget funktionsplugin.

add_filter( 'get_product_search_form' , 'wppro_woo_custom_product_searchform' );

/**
 * wppro_woo_custom_product_searchform
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function wppro_woo_custom_product_searchform( $form ) {
	
	$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
		<div>
			<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
			<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
			<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
			<input type="hidden" name="post_type" value="product" />
		</div>
	</form>';
	
	return $form;
	
}

Du kan opnå det samme ved at oprette en product-searchform.php i dit temas mappe og indsætte den ønskede kode heri. Men så vil du få en advarsel ved opdatering af WooCommerce, da du så bruger templates, der overstyrer de oprindelige.

En templatefil vil have prioritet over filtermetoden, så hvis du ikke kan få en ændring til at gå igennem, kan du tjekke om dit tema måske har en sådan fil i forvejen.

Tilpas Woocommerce faneblades titel og overskrift

Fanebladet på et WooCommerce produktopslag er ikke altid lige passende – heldigvis kan du lave det om til noget, der passer med produktet.

WooCommerce har som standard navngivet fanebladene:

• Description / Beskrivelse
• Additional information / Yderligere information
• Reviews / Anmeldelser

Men det er jo ikke sikkert at det lige passer i din webshop. Desuden er både titlen på fanen og overskriften i selve fanebladet den samme – det virker ret overflødigt.

Du kan rette det ved at lave om på oversættelsen af WooCommerce, men det er ikke en god metode, da det vil blive overskrevet næste gang, der kommer en opdatering af oversættelsen.

I stedet skal du bruge de hooks og filtre, der er beregnet til den slags. Dette gøres ved at skrive noget ekstra kode til dit undertemas function.php eller ved at lave dit eget funktions-plugin.

Kode til ændringer

Ret fanens titel til noget bestemt

Denne første kodestump retter beskrivelsens fanes tekst til noget andet for alle produkter.

https://gist.github.com/ellegaarddk/5fcee2917d7aada89c93b48a956cb9c4

Hvis du vil ændre de andre faner, så skal du rette $tabs[‘description’][‘title’] til :

• Additional information: $tabs[‘additional_information’][‘title’]
• Reviews: $tabs[‘reviews’][‘title’]

Her er en alternativ metode

https://gist.github.com/woogists/a773892c2e7e19e69c24e6051ef52198

Ret fanens titel til noget dynamisk

Du kan også rette titlen på fanebladet til noget, der skifter med produktet. Fx. produktets navn.

https://gist.github.com/ellegaarddk/fb3366e59320785241d58ff8bd657e50

Ret fanebladets overskrift

Som standard vises der en overskift i H2 i selve fanebladet – og den er den samme som titlen på fanen. Det er unødvendigt og ser lidt mærkeligt ud, hvis fanebladets titel i designet er placeret lige over Overskriften. Hvis fanen (knappen til at vælge) er flyttet ud til siden, så giver det lidt bedre mening, at man nemt kan se, hvad man kigger på.

Med denne kode kan du fjerne overskriften.

https://gist.github.com/ellegaarddk/98190d9ceb2a18338f7ada1d7d07e234

Slet produkters faneblade helt

Udkommenter evt. de faneblade, du gerne vil have vist.

https://gist.github.com/ellegaarddk/603d15ef471ba1f18a5853032719e212

WooCommerce kodetips

Produkter

Fjern dropdown med produktsortering

Du kan fjerne den helt ved en tilføjelse til dit temas functions.php eller et funktionsplugin – eller via et snippetplugin. Tilføj denne linje:

/* Remove ordering dropdown on Woocommerce product archives */
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Hvis du vil lave rettelser i indholdet kan du finde filen her:

/wp-content/plugins/woocommerce/template/loops/ordering.php

Kopier filen til dit tema og rediger i den

/wp-content/themes/yourtheme/woocommerce/loops/ordering.php

Tilføj en ramme til produktbeskrivelsen

Tilpas rammen med stregtykkelse, stil og farve så den passer og læg så instruksen i din custom.css

.woocommerce .woocommerce-tabs {border: 1px solid #e6e6e6}

Fjerne en eller flere faner på produktsiden

Brug denne kodestump til at fjerne en eller alle faner på siden for selve produktet.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

/* remove product tabs in WooCommerce */
function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Remove the description tab
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab

    return $tabs;

}

Eller tilføj følgende til din css for at skjule fx Anmeldelser-fanen:

.woocommerce .woocommerce-tabs ul.tabs {display:none !important}

Flyt rundt på produktfanerne

Du kan flytte rundt på dem som du har lyst til, det er blot et spørgsmål om tallet til sidst. Brug det som en kodesnippet eller indsæt det i dit funktionsplugin.

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

/* reorder product tabs in Woocommerce */
function woo_reorder_tabs( $tabs ) {
 
$tabs['reviews']['priority'] = 5; // Reviews first
$tabs['description']['priority'] = 10; // Description second
$tabs['additional_information']['priority'] = 15; // Additional information third
 
return $tabs;
}

Få vist lige store kasser på katalogsider

Med forskel i længden på produktoverskrifter og beskrivelser kan det nogle gange være svært at få rammerne til at være lige store.

Du kan nå et stykke vej ved at sætte en min-height i css på enten produkt selve kassen eller overskriften. Alt efter hvad der nu passer bedst i dit tilfælde.

h2.woocommerce-loop-product__title {
  min-height: 40px;
}

Filtrering af produkter

Nogen gange er den bedste løsning bare et investere tid eller penge i et godt plugin. Hvis du vil have et godt filter, så tag et kig på de her to:

https://da.wordpress.org/plugins/woocommerce-products-filter/

https://barn2.co.uk/wordpress-plugins/woocommerce-product-table/

CheckOut

Ret Etiketter på felter i checkout

/*
* Change the country label
* src: https://developer.woocommerce.com/docs/code-snippets/customising-checkout-fields#section-2
*/
function eid_change_checkout_fields( $fields ) {
     $fields['country']['label'] = "Country/Region (contact us if not on the list)";

    return $fields;
}
add_filter( 'woocommerce_default_address_fields' , 'eid_change_checkout_fields' );

Handelsbetingelser i ny fane

Woocommerce er begyndt at vise handelsbetingelser som en modal på samme side -og det er bare ikke altid den bedste løsning.

Heldigvis kan den funktion ret nemt deaktiveres, så det i stedet vises på et nyt faneblad.

/**
 * Force WooCommerce terms and conditions link to open in a new page when clicked on the checkout page
 */
function eid_woocommerce_checkout_terms_and_conditions() {
  remove_action( 'woocommerce_checkout_terms_and_conditions', 'wc_terms_and_conditions_page_content', 30 );
}
add_action( 'wp', 'eid_woocommerce_checkout_terms_and_conditions' );

Emails

Send mail ved Afventer (pending) status

WooCommerce sender først en mail, når betalingen er gennemført, men nogle gange kan det være vigtigt at få besked allerede før betaling er gennemført.

/*
* Temporary solution for notifying admin for orders pending payment 
*/
// New order notification only for "Pending" Order status
function eid_pending_new_order_notification( $order_id ) {
    // Get an instance of the WC_Order object
    $order = wc_get_order( $order_id );

    // Only for "pending" order status
    if( ! $order->has_status( 'pending' ) ) return;

    // Get an instance of the WC_Email_New_Order object
    $wc_email = WC()->mailer()->get_emails()['WC_Email_New_Order'];

    ## -- Customizing Heading, subject (and optionally add recipients)  -- ##
    // Change Subject
    $wc_email->settings['subject'] = __('{site_title} - New customer Pending order ({order_number}) - {order_date}');

    // Change Heading
    $wc_email->settings['heading'] = __('New customer Pending Order'); 
    $wc_email->settings['recipient'] .= 'support@otiom.com,info@eid.dk,mde@otiom.com'; // Add email recipients (coma separated)

    // Send "New Email" notification (to admin)
    $wc_email->trigger( $order_id );
}
add_action( 'woocommerce_checkout_order_processed', 'eid_pending_new_order_notification', 20, 1 );

Related Posts

WordPress og FAIR: Et skift i retning

Sidst i februar kom nyheden om, at Joost de Valk o...

Skriv den bedste procesbeskrivelse (SOP)

En procesbeskrivelse (SOP) beskriver en fastlagt række af handlinger for gennem ensartethed at mindske fejl. Vigtigt for alle virksomheder!

Mine bedste WordPress plugins 2026

Alle har deres favoritter og jeg har også mine bed...