[Resolved] woocommerce bookable product page customisation

Home Forums Support [Resolved] woocommerce bookable product page customisation

Home Forums Support woocommerce bookable product page customisation

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #307430
    Olga

    Hi,

    The page in question: http://cobbletales.com/product/edinburgh-old-town-architecture-tour/

    The product image seems to be square by default, but the calendar takes up more space into the bottom and so the too are very misaligned. Can the two columns match? If its too much hassle I would like to remove the image and centre the calendar.
    However, when I remove the featured product image from a booking window, on the front end I see a massive image icon in the area where the image used to be. How do I go about this?

    Also, whatever controls the calendar fonts, does not seem to control them. At the moment the days and month are sans-serif – looks very out of place as times and other text are serif as prescribed by theme.

    Thanks!
    Olga

    GP Premium 1.2.96
    #307509
    Leo
    Staff
    Customer Support

    Hi Olga,

    I don’t really see a way to align the columns unfortunately.

    Might not be a bad idea to ask WooCommerce to see if there are any settings that you could use to get the layout you wanted

    You could try the following CSS but I would think this would be the last option:

    .single .woocommerce-product-gallery {
        display: none;
    }
    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
        text-align: center;
        width: 100%
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    As for the font in calendar, I don’t think any of the customizer options from GP would work currently as all the styles are coming from WooCommerce plugin itself.

    If you let me know which element/text you are wanting to change I can give you some CSS for it.

    #307516
    Tom
    Lead Developer
    Lead Developer

    I think Leo’s CSS above is probably the best option – at least for now until the WooCommerce add-on is released πŸ™‚

    #307802
    Olga

    Thanks guys, check out woocommerce answering the image question: “Having a large image icon show after removing the product image isn’t ideal. This functionally is a result of the active theme. Have you contacted the theme developer about this issue?” Seems I am in nobody’s land;D

    Leo, the code worked, thank you very much. You are a magician;D
    If I do want an image with some products, what would be the css to set visible image ratio? Now it crops to a square, but if i could control the ration, could align it manually.

    Leo, for the fonts – do you see all sans-serif fonts, like the name of the month and date numbers, I want to css them into my serif font. That would be amazing.

    While we are at it – the price is green. I need it orange. This is the code provided on woocommerce help, but does not work:

    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
    color: #e87400 !important;
    }

    Any idea why?

    Sorry for the long question.

    Best,
    Olga

    #308009
    Tom
    Lead Developer
    Lead Developer

    For the images, if you go to “WooCommerce > Settings > Products > Display”, you should see the product image sizes + option to hard crop or not.

    Try this CSS for your calendar font:

    .ui-widget {
        font-family: inherit !important;
    }

    This CSS should work for the price:

    .woocommerce ul.products li.product .price, 
    .woocommerce div.product p.price {
        color: #e87400 !important;
    }

    Hope this helps πŸ™‚

    #308263
    Olga

    Thanks for the code Tom, worked! The booking page now looks all consistent!
    The image display settings do not seem to affect the situation on the ground. Will be contacting woocommerce about that.

    Thank you for being so helpful and quick to respond!

    #308380
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.