I'm adding increment buttons on product page around quantity div, which contains quantity input field. I hook my button-generating functions create_button_before and create_button_after:
add_action( 'woocommerce_before_add_to_cart_quantity', 'create_button_before' );
add_action( 'woocommerce_after_add_to_cart_quantity', 'create_button_after' );
This works great apart from one thing. I would like the buttons to be adjacent without space to quantity div as inline-block elements. Unfortunately inline-block in CSS separates elements with line breaks styled as white spaces.
On product page there is no way I can apply regular CSS hack to make parent element's font-size 0 (space would have 0 width) and explicitly state font-size of all children. It's because there is no constant element structure of ancestors - it changes based on whether product is single, variable, grouped etc. Maybe I would somehow be able to handle all cases, but maintenance-wise it would be worse than overriding templates.
Is there any way I could eliminate line breaks after my first button and before second button with PHP, while not overriding template?
EDIT: I found out that as CSS solution, display: block and float: left will work properly, assuming that I add left margin to Add to cart button which is next to my buttons. I still would like to know if I can achieve this through PHP.
How about in your 'create button' functions, when creating the button html, include inline styling in your button?
style="display:block; float:left"
If this style is meant to be applied to a parent container, then include <style></style> on your page to override that container with this style?
Related
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
I'm using the Wordpress plugin "Woocommerce".
I wasn't happy with the way that the standard four column layout of my products meant that they all became too small when the browser width became narrower, so I've tried to use media queries to turn them into a three column layout when the browser reaches -1250px.
There were a few issues with the margin css that the plugin uses, in the sense that it is preset to have a margin-right on all but the last product.
I've changed this to target the third item instead of the fourth by using
.woocommerce-page ul.products li.product:nth-child(3n+3) {
margin-right: 0px;
}
I then fixed the fourth by adding the right margin, giving it the default margin value of margin: 0 3.8% 2.992em 0; initially set by the plugin.
But for some reason the items after the third one are floating all over the place and I'm not sure why.
Can any body tell me what might be causing this and how I can fix it?
An example page that shows this problem is: http://www.lucieaverillphotography.co.uk/product-category/prints/
This happened to me. If you look at the css, woocommerce assigns a class of 'last' to the last item (or, li) in a row, and 'first' to the first item.
When you resize the window and change to a 3-item structure, what was the last item becomes the first.
You need to target those classes, maybe removing their properties at specific breakpoints, or altogether. You can start by trying to remove clear properties for .first and .last.
have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.
If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)
Website: http://www.viskasseimai.lt/
P.S. it works great on a singple post, but something is wrong inside the home page...
Plugin used: https://wordpress.org/support/plugin/facebookall/page/3
The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.
CSS
.blog-grid.element.column-1.masonry-brick {
position: relative !important;
top: auto !important;
}
The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used.
If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.
I am trying to replicate a page http://www.haylockpittman.co.uk/ onto http://www.haylockpittman.co.uk/new-refurb-publish/ but it can't get the images at the top to align correctly.
They call a div id 'outer' for the sizing but it appears correctly on te home page and not on the new page.
How can I change it so it calls the correct code on the new page without messing up the original page.
Thanks in advance.
Wordpress adds a series of utilities classes to your <body> tag; in your case the CSS targets .home #outer while the second page you linked is not the home page and is added other css classes. In order to make this work, you can change your css (style.css::976) selector from
.home #outer
to
.page #outer
this will target both your pages (as your home gets the page class as well). You can decide a different selector, perhaps just #outer, if you want to make sure that it will work also on articles.
That really depends on your goal.
Images have a diffrent class applied to them, causing resizing issue and the div is 600px instead of 400. I would change the page template to match all used classes/ids for all elements and make sure they are the same for both the homepage and this subpage.
TL; DR: I'm looking for a way to display a SPAN element that can achieve the desired behavior showed in the 1st and 3rd pictures below.
Interactive Code: http://jsfiddle.net/53GZe/1/
When selecting text from a block of text, the display needs to be inline, so that no breaks are generated.
Now when I try to select multiple elements with the same display: inline: I get this:
Because the display is set to inline, it doesn't know how wide to make the <span> (the element inserted around the selection to give the custom highlight effect)
So, for the other case, when I set display to table-cell, I get this behavior:
Which is wonderful, and kind of neat. Except for that it doesn't work with an inline block of text like in my first example:
(notice the breaks before and after the selection)
Could you use jQuery to search the children of the highlighted div. Then if there are any blocked elements or line breaks, set the display property to table-cell.
Or by setting a new CSS rule for the situation, maybe again, by using jQuery to check for the inner elements?
.situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }