Ondersteuning » Thema en CSS/opmaak » Summary naast product

  • Ik probeer nu al een tijdje om de omschrijving van het product naast het plaatje van het product te krijgen.
    Ik ben aan het zoeken in mijn style.css -> single product page.
    Ik heb daar wel gevonden hoe je het kan uitlijnen en hoe je de grootte kan aanpassen maar er veranderd niks.

    Details:
    Site
    werk met woocommerce…

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Anonymous User 9027739

    (@anonymized-9027739)

    Ik heb een float gegeven aan de “images” en de “description”.

    Dan krijg ik dit resultaat.
    Zelf een div omheenbouwen is veiliger voor het gevallen deze classes vaker gebruikt worden.

    Dit resultaat:
    http://i47.tinypic.com/34qs2tj.png

    Thread starter Rinaldoklein

    (@rinaldoklein)

    Hartstikke bedankt!
    Dat is precies wat ik wil. Maar ik snap niet precies waar ik dit moet doen. Zou jij voor me kunnen kijken??

    /* 7.3 Single Product Page */
    .single-product .type-product { clear: left; position: relative; }
    .single-product .product del { color:#ccc; }
    .single-product .product ins { text-decoration: none; }
    .single-product .product .images, .single-product .product .summary { margin-bottom:20px; }
    .single-product .product .images { width:220px; float: left; }
    .single-product .product .images img { width:200px; height: auto; padding: 9px; border:1px solid #e6e6e6; margin-bottom:12px; }
    .single-product .product .images .thumbnails { overflow: hidden; zoom:1; }
    .single-product .product .images .thumbnails img { padding:0; border:0; width:30.75%; float: left; margin-right:3.8%; margin-bottom:8px; }
    .single-product .product .images .thumbnails .first { clear: left; }
    .single-product .product .images .thumbnails .last img { margin-right:0; }
    .single-product .product .summary { width:370px; float:right; }
    .single-product .product .summary h1.product_title { font-size:24px; font-weight: bold; color:#333; padding:0 0 5px; margin:0; }
    .single-product .product .summary p { margin-bottom:10px; }
    .single-product .product .summary .price { font-size:24px; color:#222;font-weight: normal; padding:10px 0; }
    .single-product .product .summary .stock { padding-left:25px; margin:5px 0 15px; background: url(images/ico-tick.png) no-repeat left 2px; }
    .single-product .product .summary .stock.out-of-stock { background: url(images/ico-alert.png) no-repeat left 2px; }
    .single-product .product .summary form.cart { margin-bottom:20px; overflow: hidden; zoom:1; padding-top:10px; border-top:1px solid #e6e6e6; }
    .single-product .product .summary form.cart .quantity { float: left; }
    .single-product .product .summary form.cart .button { float: right; margin:0; }
    .single-product .product .summary form.cart table.variations { margin-bottom:10px; margin:-11px 0 10px 0; }
    .single-product .product .summary form.cart table.variations td { vertical-align: middle; }
    .single-product .product .summary .single_variation .stock { border-bottom:1px solid #e6e6e6; padding-bottom:10px; margin-bottom:10px; }
    .single-product .product .summary .single_variation .price { display: block; }
    .single-product .product .summary .group_table { border:0; margin-bottom:10px; }
    .single-product .product .summary .group_table td, .single-product .product .summary .group_table th { padding:0 8px 8px 0; border: 0; }
    .single-product .product .summary .group_table .quantity { min-width: 100px; }
    .single-product .product .summary .group_table td.price { padding:0 8px 8px 0; font-size:12px; min-width: 80px; }
    .single-product .product .summary .group_table td.price .stock { display: none; margin-bottom:0; }
    .single-product .product .summary .group_table td.price .stock.out-of-stock { display: block; background: url(images/ico-cross-small.png) left no-repeat; font-size:11px; padding-left:16px; margin-top:0 !important; }
    .single-product .product .shop_attributes th { width:175px; }
    .single-product .product .shop_attributes p { margin:0 !important; }

    .single-product .product #tabs { clear: both; }

    /* 1 column single product */
    .single-product.layout-full .images { width:300px; }
    .single-product.layout-full .summary { width:570px; }
    .single-product.layout-full .images img { width:290px; }

    Alvast bedankt!

    Anonymous User 9027739

    (@anonymized-9027739)

    .single-product .product .images { float: left; }

    of

    nieuw regeltje:
    .product .images { float: left; }

    Kan het niet uitstekend testen maar de laatste werkt zeker.

    Thread starter Rinaldoklein

    (@rinaldoklein)

    Ach ja maar natuurlijk! Hartstikke bedankt het is gelukt!!

    Thread starter Rinaldoklein

    (@rinaldoklein)

    Sorry maar ik heb nog een vraag.
    Als ik nu bij firefox kijk staat de product variatie ook naast het product, alleen in safari niet?
    En tweede punt de vak bij kies een inhoud loopt door mijn sidebar heen. Hoe kan ik dit aanpassen?

    firefox
    safari

    Anonymous User 9027739

    (@anonymized-9027739)

    Voeg deze toe.

    .variations {
        width: auto;
    }
    Thread starter Rinaldoklein

    (@rinaldoklein)

    Heb ik gedaan en de breedte is nu aangepast, bedankt!
    Alleen hoe komt het de variations in firefox wel naast image staan en in safari niet?

    Thread starter Rinaldoklein

    (@rinaldoklein)

    Na een uurtje pauze en niks gedaan te hebben toont de webshop ook in safari eindelijk de variations onder de summary. Zal wel aan mijn server gelegen hebben!

    Hartstikke bedankt je hebt me veel tijd gescheeld!

    Anonymous User 9027739

    (@anonymized-9027739)

    Mooi! Graag gedaan.
    Lag aan de browser die catcht websites, slaat ze op. Om ze later sneller terug te halen en kan ze daardoor ouder tonen.

    Thread starter Rinaldoklein

    (@rinaldoklein)

    Goedendag,

    Sinds kort constateer ik dat bij de producten de productomschrijving naast de foto van het product staat. Voorheen was dit nooit zo en stond alles zoals het hoorde.
    Misschien komt het doordat ik een paar weken geleden een update van woocommerce heb gehad. Weet iemand hoe ik nu de productomschrijving (en alleen dat) onder de foto van het product krijg? Ik heb al van alles geprobeerd alleen krijg het niet voor elkaar…

    voorbeeld

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Summary naast product’ is gesloten voor nieuwe reacties.