Support Volgende » CSS / opmaak vragen Volgende » Woocommerce schermen met (te)veel witruimte op de pagina

  • Opgelost hanvdg

    (@hanvdg)


    Hallo !

    Ik ben bezig om een webshop te maken voor een site. In principe werkt die al in testmodus. Daarom kan ik nog geen link bijvoegen. Wel twee schermafbeeldingen.
    Bij de pagina’s (Uw bestelling), checkuit en checkuit (Bestelling ontvangen), heb ik tussen de rijen met producten en de ‘winkelmand totalen’ heel veel witruimte. Dit is ook het geval op de pagina ‘bevestiging’ tussen de producten en de opmerking: ‘Bedankt voor uw bestelling’. Ik wil daar een veel compacter geheel van maken.
    Overal al gezocht, maar kan nergens vinden hoe ik dit kan doen.
    Ongetwijfeld staat dit in de instelling van een css bestand, maar welke is dat en hoe breng ik die wijziging aan?

    Schermafbeeldingen:
    https://pasteboard.co/HfeKuR3.png
    https://pasteboard.co/HfeK8Bj.png

    Bij voorbaat dank voor uw hulp.
    Han

    • Dit onderwerp is gewijzigd 1 maand, 2 weken geleden door  hanvdg.
11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Hallo Han, zonder daadwerkelijk link kan ik hier persoonlijk weinig zinnigs over zeggen gezien er niet gekeken kan worden welke css selectors verantwoordelijk zijn voor het creëren van deze ruimtes.

    Het kan daarnaast ook veroorzaakt worden door breaks in de HTML (<br /> of <br>). Met de developer toolbar van Google Chrome kun je in principe ook kijken wat er verantwoordelijk is voor de ruimte. Als je niet weet hoe dit werkt kun je dat hier lezen: https://developer.chrome.com/devtools

    Hoi @hanvdg,

    Ik vermoed dat dit muziekkring.nl is.
    In style.css voeg de volgende codes toe:

    .woocommerce-content-box {margin-bottom: 0px;}
    .cart-collaterals {margin-top: 5px;}

    De checkout kan ik helaas niet checken, hiervoor moet ik een bestelling plaatsen.
    Succes!

    Hoi @helldog2018,

    Ja, geweldig! Dat was het.
    Bedankt voor de hulp!

    Misschien ook een idee voor de andere melding?

    Groeten,
    Han

    • Deze reactie is gewijzigd 1 maand, 1 week geleden door  hanvdg.

    Beste @hanvdg,

    Dat kan ik alleen zien als er een testbestelling gedaan kan worden, anders moet ik daadwerkelijk een bestelling plegen om in de bedankt pagina terecht te komen.

    Als de website op testen staat, dan wil ik prima een testbestelling plegen en een oplossing bieden.

    Met vriendelijke groet,
    Henk.

    Beste Henk,

    Dat kan nu. De Ticketshop van http://www.muziekkring.nl staat in testmode, je kunt dus een bestelling doen.

    De link naar de Ticketshop is:
    Ga naar de footer van een pagina en klik op ‘Disclaimer’, aan het eind van de tekst zie je de regel
    ‘Mocht deze disclaimer wijzigen, dan vindt u de meest recente versie van de disclaimer van Muziekkring.nl op deze pagina.’
    Klik op de rode a van pagina en je zult naar de Ticketshop gaan. Om het goed te zien kun je het beste meerdere tickets kopen.
    Na afrekenen krijg je een scherm met meerdere opties, kies voor Betaald. en je krijgt de betreffende pagina te zien.

    Alvast bedankt,
    Han

    • Deze reactie is gewijzigd 1 maand, 1 week geleden door  hanvdg.

    Hoi @hanvdg,

    Ik heb zojuist naar de bedankt pagina gekeken, dit word niet veroorzaakt door CSS.
    Er wordt per bestelling automatisch tweemaal <br> toegevoegd (een enter).

    Zou je de code binnen thankyou.php kunnen doorsturen naar deze pagina?
    Je kan hem vinden via templates/checkout/thankyou.php

    Hallo Henk,

    Je bent nog laat bezig 😉

    Hierbij de tekst van de thankyou.php
    ==========
    <?php
    /**
    * Thankyou page
    *
    * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php.
    *
    * HOWEVER, on occasion WooCommerce will need to update template files and you
    * (the theme developer) will need to copy the new files to your theme to
    * maintain compatibility. We try to do this as little as possible, but it does
    * happen. When this occurs the version of the template file will be bumped and
    * the readme will list any important changes.
    *
    * @see https://docs.woocommerce.com/document/template-structure/
    * @author WooThemes
    * @package WooCommerce/Templates
    * @version 3.2.0
    */

    if ( ! defined( ‘ABSPATH’ ) ) {
    exit;
    }
    ?>

    <div class=”woocommerce-order”>

    <?php if ( $order ) : ?>

    <?php if ( $order->has_status( ‘failed’ ) ) : ?>

    <p class=”woocommerce-notice woocommerce-notice–error woocommerce-thankyou-order-failed”><?php _e( ‘Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.’, ‘woocommerce’ ); ?></p>

    <p class=”woocommerce-notice woocommerce-notice–error woocommerce-thankyou-order-failed-actions”>
    get_checkout_payment_url() ); ?>” class=”button pay”><?php _e( ‘Pay’, ‘woocommerce’ ) ?>
    <?php if ( is_user_logged_in() ) : ?>
    ” class=”button pay”><?php _e( ‘My account’, ‘woocommerce’ ); ?>
    <?php endif; ?>
    </p>

    <?php else : ?>

    <p class=”woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received”><?php echo apply_filters( ‘woocommerce_thankyou_order_received_text’, __( ‘Thank you. Your order has been received.’, ‘woocommerce’ ), $order ); ?></p>

    <ul class=”woocommerce-order-overview woocommerce-thankyou-order-details order_details”>

    <li class=”woocommerce-order-overview__order order”>
    <?php _e( ‘Order number:’, ‘woocommerce’ ); ?>
    <?php echo $order->get_order_number(); ?>

    <li class=”woocommerce-order-overview__date date”>
    <?php _e( ‘Date:’, ‘woocommerce’ ); ?>
    <?php echo wc_format_datetime( $order->get_date_created() ); ?>

    <?php if ( is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?>
    <li class=”woocommerce-order-overview__email email”>
    <?php _e( ‘Email:’, ‘woocommerce’ ); ?>
    <?php echo $order->get_billing_email(); ?>

    <?php endif; ?>

    <li class=”woocommerce-order-overview__total total”>
    <?php _e( ‘Total:’, ‘woocommerce’ ); ?>
    <?php echo $order->get_formatted_order_total(); ?>

    <?php if ( $order->get_payment_method_title() ) : ?>
    <li class=”woocommerce-order-overview__payment-method method”>
    <?php _e( ‘Payment method:’, ‘woocommerce’ ); ?>
    <?php echo wp_kses_post( $order->get_payment_method_title() ); ?>

    <?php endif; ?>

    <?php endif; ?>

    <?php do_action( ‘woocommerce_thankyou_’ . $order->get_payment_method(), $order->get_id() ); ?>
    <?php do_action( ‘woocommerce_thankyou’, $order->get_id() ); ?>

    <?php else : ?>

    <p class=”woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received”><?php echo apply_filters( ‘woocommerce_thankyou_order_received_text’, __( ‘Thank you. Your order has been received.’, ‘woocommerce’ ), null ); ?></p>

    <?php endif; ?>

    </div>
    =====

    Groeten,
    Han

    Zou je het volgende eens kunnen proberen in style.css
    .avada-thank-you p, .avada-thank-you br {display: inline;}

    En ja, heb op dit moment nachtdienst 😉

    Hallo Henk,

    Ja, hoor dat is ook opgelost, de regels staan nu dichter bij elkaar.
    Enorm bedankt voor al je hulp! Geweldig 🙂
    Je kunt het zelf nog even controleren, daarna zal ik dit item als opgelost markeren.

    Groeten,
    Han

    helldog2018

    (@helldog2018)

    Hoi @hanvdg,

    Ik ben blij dat het opgelost is, je kan deze topic als opgelost instellen 🙂

    Hallo Henk,

    Ok, prima, nogmaals mijn dank !!

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)