Vormgeving-fout WooCommerce Shop Page

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Zie ook CSS - Inleiding.

Het probleem

Zo snel ik content plaats op de WooCommerce shop-pagina, raakt de vormgeving in de war: De content neemt nog maar 50% van de ruimte in beslag, en vaak is de tekst ook nog eens rechts-uitgelijnd (zoals in RTL-talen)

Shop & Product Page: Instellingen WooCommerce Shop & Product Page. Verder weinig spannends over te melden
Het probleem: Content op de shop-pagina beslaat slechts de helft van de breedte

Vermoedelijke oorzaak

Vermoedelijke oorzaak: Deze CSS-code voor product layout wordt toegepast op de content

Hoe voeg je eigen css-code toe?

In Drupal stop je je eigen css-code in een apart bestand fresh.css. Ongetwijfeld heeft WordPress ook zo'n oplossing:

  • wp_enqueue_style in functions.php schijnt de functie te zijn om eigen css-bestanden toe te voegen [1]
  • Naam: custom.css [2]
  • Locatie: De hoofdmap van een theme lijkt de standaardlocatie te zijn voor custom.css [3]

Betreffende CSS-code

Ik wil dit aanpassen:

 .col-md-6 {
    width: 50%
}

maar alleen op de shop-pagina. Het moet dus alleen werken in een pad waarin eerst

<body class="woocommerce-page">

voorkomt, en waar een paar statements verderop

<div class="col-md-6 text-right">

voorkomt. Dat zijn dus twee klasses die niet direct op elkaar aansluiten. Da's niet zo moeilijk:

.woocommerce-page .col-md-6
{
   width: 100%
}

En klaar! De truuk is, dat bij een ascend selector van klasses, je een punt gebruikt, en een spatie tussen de namen van de twee klasses. Zonder spatie wordt het een ander soort selector.

Bronnen

Het probleem

Eigen css-code