- This topic has 6 replies, 3 voices, and was last updated 6 years, 12 months ago by Tom.
-
AuthorPosts
-
April 18, 2017 at 12:23 pm #307430Olga
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!
OlgaApril 18, 2017 at 5:56 pm #307509LeoStaffCustomer SupportHi 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.
April 18, 2017 at 6:51 pm #307516TomLead DeveloperLead DeveloperI think Leo’s CSS above is probably the best option – at least for now until the WooCommerce add-on is released π
April 19, 2017 at 11:05 am #307802OlgaThanks 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,
OlgaApril 19, 2017 at 8:32 pm #308009TomLead DeveloperLead DeveloperFor 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 π
April 20, 2017 at 12:38 pm #308263OlgaThanks 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!
April 20, 2017 at 9:02 pm #308380TomLead DeveloperLead DeveloperNo problem! π
-
AuthorPosts
- You must be logged in to reply to this topic.