Aanpassen CSS in WooCommerce omgeving

[Anoniem: 851997]

Hoi, ik heb recentelijk WooCommerce toegevoegd aan mijn Wordpress-blog, maar ben niet helemaal tevreden over de layout. Zoals je op onderstaande afbeelding ziet staat het vierde product op een nieuwe regel terwijl daarnaast nog genoeg ruimte is voor 1 of misschien wel 2 producten (het blok is zo breed als het sorteringsveld bovenaan!). Ook in de CSS kan ik niets vinden waarvan ik iets zou kunnen aanpassen wat zou kunnen helpen. Heeft iemand enig idee hoe ik dit doe?

[mcDavid]

Anoniem: 851997 schreef op dinsdag 24 januari 2017 @ 17:26:
Heeft iemand enig idee hoe ik dit doe?

Ik zou adviseren het met een computer te doen.

serieus:
Hier kunnen we natuurlijk niets mee. Wat heb je zelf geprobeerd? Wat lukte niet? Waar liep je tegenaan?

We kunnen niet van een plaatje af ruiken hoe je code eruit ziet en wat daar mogelijk fout mee gaat.

[Anoniem: 851997]

Hahaha, dat met die computer had ik zelf ook al geprobeerd ;-)

Dit is de code die ik heb:

code:

.woocommerce input, .woocommerce select, .woocommerce textarea {
    border: 1px solid #ddd;
    color: #444;
    padding: 9px 10px;
}
.woocommerce .shop_page #main{
    background-color: #FFF;
    padding: 40px;
    box-sizing: border-box;
}
.woocommerce .woocommerce-breadcrumb {
    font-size: 13px;
    margin-bottom: 18px;
    color: #666;
    font-style: italic;
}

    .woocommerce .woocommerce-breadcrumb a {
        color: #666
    }
.woocommerce ul.products li.product a img {
    margin-bottom:3px;
    -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

.woocommerce ul.products li.product a img:hover {
    opacity: 0.9;
}

.woocommerce ul.products li.product h3 {
    color: #000;
    text-align: center;
    font-style: italic;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 20px;
    padding: 15px 0 0 0;
}
.woocommerce ul.products li.product .price {
    text-align:center;
    font-size:13px;
    color:#999;
    margin-top: 5px;
    margin-bottom: 0;
    line-height: normal;
}
.woocommerce ul.products li.product .price del {
    display:inline;
    margin-right:3px;
}
.woocommerce ul.products li.product .price ins {
    font-weight:400;
    text-decoration:none;
}
.woocommerce ul.products li.product .button {
    display:none;
}
.widget_product_categories .count {
    font-size:14px;
    color:#999;
}
.woocommerce ul.products li.product .onsale {
    display:none;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color:#eee;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background-color:#d8d8d8;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background-color:#d8d8d8;
}
.woocommerce .woocommerce-ordering {
    margin-top: -15px;
    margin-bottom: 40px;
}
.woocommerce .woocommerce-ordering select {
    padding:7px 9px;
    color:#999;
    border-radius:2px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    border:none;
    background:#EEE;
    max-width:180px;
    height: 20px;
    outline: none;
}
.woocommerce .page-title {
    font-size:25px;
    margin-bottom: 17px;
    line-height: 30px;
    font-style: italic;
}
.woocommerce .woocommerce-result-count {
    color:#666;
    font-size: 9px;
}

.woocommerce nav.woocommerce-pagination ul {
    border:none;
}
.woocommerce nav.woocommerce-pagination ul li {
    border:1px solid #e5e5e5;
    margin:0 3px;
    border-radius:3px;
}
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
    background:#EEE;
    color:#444;
}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
    color:#444;
    font-size:13px;
}

.woocommerce-page ul.products li.product, .woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li {
    margin: 0 3% 48px 0;
  width: 20%;
}
.woocommerce-page ul.products li:nth-of-type(3n) {
    margin-right: 0;
}

Hierin zie ik niet zo 1, 2, 3 waar ik de breedte van het vak waarin de items in de shop zich bevindt. In 'Inspecteren' (via Mac) heb ik geprobeerd het een en ander aan te passen in dit stuk CSS maar er verandert niets op de pagina zelf..

[mcDavid]

Zo'n stuk code kunnen we ook niets mee... behalve dat het onleesbaar is omdat het niet in [code] tags staat is het ook niet specifiek. Zorg dat je je probleem terugbrengt naar de basics. Strip alle overbodige code weg, tot je het minimale overhoudt om je probleem te reproduceren.
Stap 1 bij het vragen om hulp is altijd dat je het probleem duidelijk hebt. En dat is nu niet het geval. Het voordeel is dat je door dit zelf te doen, vaak ook zelf het probleem al ziet.

Daarnaast is "het een en ander aangepast" natuurlijk ook niet specifiek genoeg. Wát heb je aangepast? Wát had je verwacht dat dat deed, en wát gebeurde er in plaats daarvan? Vertel dat, dan kunnen we specifieke uitleg geven. Nu zouden we moeten gokken naar een oplossing, die je misschien al lang geprobeerd hebt maar niet bleek te werken. Dat schiet niet op.

[Anoniem: 851997]

Hierboven is al een gefilterd stuk van de CSS. Doordat me uit de CSS niet duidelijk wordt waar het voorkomen van de shop-pagina aangepast kan worden, weet ik ook niet waar ik het 'probleem' moet zoeken.

Wat ik hierboven al aangaf: er gebeurde niks wanneer ik in het onderstaande stuk code de waardes aanpaste. Ik had verwacht dat ik in deze code de 'box' kon aanpassen.

code:

.woocommerce input, .woocommerce select, .woocommerce textarea {
border: 1px solid #ddd;
color: #444;
padding: 9px 10px;
}
.woocommerce .shop_page #main{
background-color: #FFF;
padding: 40px;
box-sizing: border-box;
}
.woocommerce .woocommerce-breadcrumb {
font-size: 13px;
margin-bottom: 18px;
color: #666;
font-style: italic;
}

.woocommerce .woocommerce-breadcrumb a {
color: #666
}
.woocommerce ul.products li.product a img {
margin-bottom:3px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}

[Vos]

Hier kunnen we echt bar weinig mee. Ik heb het gevoel dat het 4e item een clear mee krijgt oid.

Als ik de code bekijk die je plaatst hebben de list items een breedte van 20% en een marge rechts van 3%. Dan zouden er dus prima 4 items naast elkaar moeten passen.

Als je een beetje met de element inspector rondneust moet je dit zo opgelost hebben. Heb je dat überhaupt al geprobeerd?

[ Voor 61% gewijzigd door Vos op 24-01-2017 18:35 ]

[MiliaanR]

Zitten alle resultaten wel in dezelfde wrapper?
En past het überhaupt? Is er niet nog sprake van een onzichtbare sidebar etc?

[ Voor 5% gewijzigd door MiliaanR op 24-01-2017 18:35 ]

[Hiroj]

WooCommerce heeft haar eigen documentatie, waarin ze uitleggen hoe je de CSS kan aanpassen.

Nu wil je denk ik niet de CSS van de plugin zelf aanpassen, maar dit in je eigen CSS document stoppen.
Je kunt er ook voor kiezen om je eigen WordPress thema ondersteuning te geven voor WooCommerce. Dit geeft je ook meer controle over hoe de HTML eruit komt te zien.

[Sumpsoned]

Googlen helpt ook vaak; ik kwam hierop uit: YouTube: WooCommerce. How To Change Amount Of Products Per Row

Het kan zijn dat de producten ingeladen worden met 3 kolommen, of dat er iets niet klopt met de css. Hoe je het kan fixen wordt in beide gevallen uitgelegd in het filmpje.