Kender du det med, at ville ændre en lille ting på sin eksisterende wordpress hjemmeside eller woocommerce webshop, og så kan man ikke huske, hvor man skal tage fat og hvordan?

I vores gør-det-selv WordPress guide viser vi dig, hvordan du selv udfører nogle af de små tilpasninger til WordPress, som du ofte har behov for.

Og nogle henviser til testede plugins, som løser opgaven.

Vores tips er fra begynder niveau til lidt mere avanceret niveau.

Sådan ændrer du i checkout-felterne i woocommerce

Checkout-siden i woocommerce efterlader ofte ønsker om tilpasning, fx sammenrykning af felter, skjule felter eller tilføje nye felter.

Plugin’et Flexible Checkout Fields Woocommerce gør det muligt at ændre i checkoutfelterne på en nem måde.

I følgende blogindlæg kan du se hvordan det gøres step-by-step: https://www.wpdesk.net/blog/woocommerce-shipping-and-billing-address/

En grundig gennemgang af, hvordan du re-organiserer alle checkout-felter, kan du læse her: https://rudrastyh.com/woocommerce/reorder-checkout-fields.html

Sådan sidestiller du postnr. og by i checkout-formularen: https://jeroensormani.com/ultimate-guide-to-woocommerce-checkout-fields/

Sådan laver du et child theme

Når du vil lave tilpasninger i dit WordPress Tema (theme), som går ud over, hvad du kan ændre i indstillingerne i temaet, så bør du lave et såkaldt child theme.

Et child theme giver du mulighed for at lave kodeændringer og tilpasninger i dit tema, som ikke vil blive overskrevet ved opdatering af temaet, hvilket ellers typisk vil være tilfældet.

Rent praktisk laver du en ny tema-mappe, og kopi filerne functions.php og style.css, hvilket er de 2 filer du typisk kan lave en masse ændringer i.

Du kan bruge et plugin, som du kan installere med et par få klik, eller du kan lave child-temaet manuelt.

Opsæt et child-theme med plugin

Hent følgende plugin og følg anvisningen: https://da.wordpress.org/plugins/child-theme-configurator/

Opsæt et child-theme uden plugin

  1. Log ind via ftp-server eller webhotellets filbrowser, og opret en ny mappe i mappen “/wp-content/themes/ som du kalder temaets navn efter af -child, fx: “storefront-child”.
  2. Opret et nyt .css dokument i den nye mappe, som du kalder “style.css”
  3. I “style.css” indsætter du følgende tekst øverst i dokumentet:
/*
Theme Name: Storefront Child
Template: storefront
*/
/*-------------------- custom css below --------------------*/
  1. Erstat Theme Name og Template, så det matcher child-teamets navn (uden bindestreg) og det oprindelige temas navn.
  2. Opret et nyt .php dokument kaldet “functions.php” og indsæt følgende kode i dokumentet og gem:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

function enqueue_child_theme_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
//
// Your code goes below
//
?>

Dit child-theme er nu klar, og du kan lave stylesheet ændringer i den nye child-theme “style.css” og kodeændringer i “functions.php”, som ikke bliver overskrevet ved fremtidige opdateringer til dit hoved-tema.

Nyttige SEO plugins

Til intern SEO on page optimering:

  • Rank math – giver dig en masse nyttige værktøjer som sitemaps, rich snippets, nemme meta ændringer, 404 overvågning og redirect tool
  • A3 lazy load – loader videoer og billeder, først når de vises, hvorved hastigheden på sitet øges
  • Short pixel – billedoptimering, så filstørrelsen reduceret med mindst muligt negativ impact på kvalitet. Mindre filstørrelse lig med hurtigere loadtider
  • W3 total cache – plugin som optimerer hastigheden på dit site med et væld af tilpasningsmuligheder. Gratis versionen fungerer a-okay.
  • Easy table of contents – opstil automatisk en indholdsfortegnelse baseret på dine overskrifter. En nyttigt når du skriver længere artikler/blogindlæg, og gerne vil give læseren et godt overblik over indholdet

Fjern breadcrumbs fra specifikke sider

Denne artikel på woocommerce.com forklarer glimrende, hvordan du kan ændre i breadcrumbs i Woocommerce plugin og Storefront temaet: https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/

Hvis du vil fjerne brødkrummer fra forsiden, kan du Fjern brødkrummer fra forsiden, hvis du fx har hardcoded en forside: https://wordpress.org/support/topic/how-to-remove-breadcrumbs-from-shop-page/

Tillad kun 1 vare i kurven

Muligvis et sjældent behov, men ikke desto mindre, har man i nogle webshops behov for, at kunden kun kan købe 1 produkt ad gangen.

Følgende tilpasning i child-temaets functions.php sørger for at tømme indkøbskurven og lægge det nye produkt i, ved klik på Læg i Kurv knappen.

/* Clear cart data before adding new */
// before add to cart, only allow 1 item in a cart
add_filter( 'woocommerce_add_to_cart_validation', 'woo_custom_add_to_cart_before' );
 
function woo_custom_add_to_cart_before( $cart_item_data ) {
 
    global $woocommerce;
    $woocommerce->cart->empty_cart();
 
    // Do nothing with the data and return
    return true;
}

Fjern antal på produktsiden

Har du behov for, at kunden kun kan købe 1 slags af et produkt? Så kan du lige så godt skjule muligheden for at vælge antal, og derved fjerne unødig støj fra produktsiden.

Med følgende filter i child-temaets functions.php kan du helt fjerne antal-feltet (quantity field) på produktsiden:

function custom_remove_all_quantity_fields( $return, $product ) {return true;}
add_filter( 'woocommerce_is_sold_individually','custom_remove_all_quantity_fields', 10, 2 );

Fjern kreditering i footeren

Ikke alle temaer – særligt ikke de gratis af slagsen – tillader, at du fjerne kredittering i footeren. Heller ikke wordpress standardtemaer.

Denne artikel forklarer, hvordan du nemt tweaker wordpress og kan tilføje din egen info: https://www.wpbeginner.com/wp-themes/how-to-remove-the-powered-by-wordpress-footer-links/

Fjern søgefelt i Storefront tema

Det er ikke altid, at det er nødvendigt at tilbyde dine kunder en søgemulighed på hjemmesiden/webshoppen.

Du har måske meget få produkter på siden, og derved giver det ikke så meget mening, at bruger dyrbare pixelpladser på et søgefelt.

Hvis du bruger Woocommerce Storefront tema, så er det faktisk meget enkelt. Indsæt blot følgende kode i dit child-tema’s functions.php fil:

<?php
function fjern_search() {
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
}
add_action( 'init', 'fjern_search' );

Fjern beskrivelse, reviews og yderligere info fra produktsiden

I Woocommerce vises “Yderligere info” tab i bunden af produktsiden, sammen med “Vareanmeldelser” tab. Sidsnævnte kan deaktiveres via menuen: Woocommerce / Indstillinger / Varer.

Følgende kodetilføjelse til functions.php viser dig hvordan du fjerner elementerne “Beskrivelse”, “Vareanmeldelser” og/eller “Yderligere info” fra produktsiden:

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

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;
}

Bestem hvor mange produkter, der skal vises på shoppens forside

I de fleste tilfælde kan du lave følgende ændringer i childtemaets functions.php og derved ændre i antallet af produkter, som skal vises på en række.

Hvis du fx ønsker at der skal vises 5 produkter på en række på shoppens forsiden, tilføjer du følgende kodebid:

/**
 * Change number or products per row to 5
 */
add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 5; // 5 products per row
	}
}

Hvis du gerne vil præsentere nogle produkter fra shoppen, fx i en sektion på forsiden, så kan du altid indsætte produkter via WooCommerce shortcodes:

[recent_products per_page="12" columns="6"]

Som viser de 12 nyeste produkter i 2 rækker af 6.

Sådan fjerner du dropdown med sortering på shoppens forside

Ønsker du at fjerne dropdown boksen på shoppens forside, som gør det muligt at sortere shoppens varer, så kan

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
//This snippet will remove the notice that shows the number of results.
 
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering',30 );

Kilde: https://www.wpblog.com/woocommerce-remove-default-sort-option/

Sådan fjerner du overskrift fra forsiden

function remove_header() {
   if (is_front_page()) {
   $css_to_hide_header = '
   <style>
    .page.entry-header {
        display:none;
    }
        </style>';
   echo $css_to_hide_header;
}
}
add_action('wp_head', 'remove_header');

Sådan giver du Webhelpers adgang til Google Tag Manager

https://support.google.com/tagmanager/answer/6107011?hl=da