WebSuche

So ändern Sie die Spaltenbreite auf einer einzelnen Produktseite

Last Updated on 11/10/2021 by MTE Leben

In diesem Tutorial erfahren Sie, wie Sie die Spaltenbreite auf der Einzelproduktseite in WooCommerce ändern.

Spaltenbreite ändern

  • Zuerst sehen wir uns die Einzelproduktseite in WooCommerce an. Hier können Sie den Inhalt in Spalten getrennt sehen (z. B. gibt es zwei Spalten, und wenn Sie den Inhalt der Seite auf einem Tablet oder einem mobilen Gerät anzeigen, gibt es eine Spalte).
  • Lassen Sie uns auf die Parameter für die Spaltenbreite auf der Seite zugreifen. Öffnen Sie dazu bitte das cPanel Ihres Hosting-Servers und navigieren Sie zum Dateimanager.
  • Hier gehen Sie zu Ihrem aktiven Theme-Ordner (wp-content/themes/your-theme). Inc-Verzeichnis öffnen. Hier können Sie die Datei woocommerce-functions.php sehen. Lassen Sie es uns bearbeiten. Um dies zu tun, können Sie es auf Ihre Festplatte herunterladen und mit einem Code-Editor (z. B. Notepad ++, Sublime usw.) öffnen. Die andere Möglichkeit besteht darin, die Datei direkt in Ihrem Dateimanager mit der Option Bearbeiten zu bearbeiten. Vergessen Sie nicht, eine Sicherungskopie der Datei woocommerce-functions.php zu erstellen, um die Änderungen rückgängig zu machen, falls etwas schief geht.

  • Beim Öffnen woocommerce-functions.php-Datei zum Bearbeiten suchen Sie die folgenden Codezeilen (Sie können dies mit den Tastenkombinationen Strg+F tun).
  • Die Klassen in der ersten Funktion definieren die Bildblockgröße. In der zweiten Funktion kann man die Größe des Produktbeschreibungsblocks ändern.
  • Im Container < div > sehen Sie die Spaltenparameter, die im Bootstrap-Grid-System geschrieben sind. Diese Parameter geben die Spaltenbreite für verschiedene Breakpoints (klein, extra klein, mittel und groß) an. Wenn Sie mit dem Bootstrap-Rastersystem nicht vertraut sind, finden Sie hier eine kurze Anleitung, die Ihnen beim Verständnis helfen kann.
    • col – steht für die Spalten, die für die Einzelproduktseite verwendet werden.

    Rechts neben dem col-Tag sehen Sie den Breakpoint dafür. Hier ist die kurze Liste der Breakpoints, die für die Spalten verwendet werden:

    • xs – extra small (
  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    Back to top button