I am using Oxygen Builder in Wordpress, which uses a component to add a breadcrumb from Woocommerce into my product page. When using chrome dev tools, I am not totally sure if it is possible to select the very right-most element in my breadcrumb (i.e. the product name). Here is what the backend looks like:
Once again, I am trying to get rid of the right-most element with custom CSS in my stylesheet:
I was able to solve this by utilizing the Yoast plugin, inserting their short code, and then selecting a class they had specifically on the last element setting display: none.
Related
Wordpress Version: 4.9.7
WooCommerce Version: 3.4.3
WooCommerce has caused layout issues with the Cart & Checkout page. It's any WooCommerce page with a table.
The table with classes of:
shop_table shop_table_responsive cart woocommerce-cart-form__contents
is causing issues. The WooCommerce CSS for the table sets a width of 100%, however the actual width shows as 4870px. The theme's parent element width is set as 1100px.
Why is the table's width much larger than that set by the theme?
There are no CSS declarations after that overwrites.
There are no issues with the products page or product page.
You can always remove default WooCommerce styles, the risk is that you may use some. Anyway it worth the check:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
If this doesn't help, maybe post a link to the page so we can inspect the layout and CSS?
You might have unnecessary pre tag as a wrapper, causing the table to stretch:
<pre>[woocommerce_cart]</pre>
In order to remove it, you may install "Disable Gutenberg" plugin, then edit the Cart Page in Text tab, leaving only:
[woocommerce_cart]
I had the same issue. The root cause I found was caused by copy/pasting the short code from the woocomerce website directly into a visual editor (WPBakery Page Builder in my case).
The copy picked up the <pre> tag from the source and applied it when pasting, triggering a change of the style to preformatted without me noticing.
Two solutions to fix - depending on your Visual Editor and preference.
Simply changing back to the default Paragraph setting,
Highlight [woocomerce_cart]
Select Paragraph from the drop-down styles list
Update/Publish!
OR, Remove the <pre> tags manually
Change to a 'text' only view of the page code
Remove surrounding <pre> tags leaving [woocomerce_cart]
Update/Publish!
Sorry, can't embed images yet...
Image showing issue:
Image showing manual solution:
This should work for any other short codes pasted in as well, including [woocomerce_checkout] as mentioned in OP.
I am trying to get Algolia Search to work on Genesis child theme.
I have downloaded the Beta WordPress plugin from https://github.com/algolia/algoliasearch-wordpress. While I can see that network wise, everything works well, the Search Results do not show up in the AJAX drop down just below the Search Box.
Another interesting observation is that while the main Search Bar on the front end of the website does not show any results, the small Search bar within the Admin menu on the top right corner of the page does show the results. That is because the Algolia code attaches to any DOM element with [name="s"].
However, I have checked using the Inspect tools that the Main Search bar is also surrounded by Algolia <span class>. As I type into the Main Search Bar, I can see the DOM changing dynamically to add the <div> tags containing the search results. So I know that the network piece is working.
Any ideas or suggestions on what to try?
Other things I have tried:
I placed the Search bar in the footer as well (thinking that maybe the opacity might be a problem in the header). Same result
I have tested the same plugin on a similar site (with identical plugins) but with a non-Genesis theme. It works fine. That is why I have concluded that this might be related to Genesis.
As I stated above, when I type in the Search bar in the top right corner within the WordPress Admin menu, it does work.
For anyone else that is trying to get this to work on genesis, here is the CSS change:
The issue is that the parent .search-form is configured with a weird "overflow: hidden". To fix your theme, just add the following CSS rule:
.search-form {
overflow: visible !important;
}
A new version of the plugin was released recently, 0.2.6 at the time of writing this.
In the new version, the dropdown is no longer injected in the same container as the search input container but is attached to the document instead.
You should no longer need to tweak the CSS like it is shared in your own answer.
You can download the latest version from: https://community.algolia.com/wordpress
Best
This is a wordpress website designed by a third party which I am doing some amendments to.
I'm trying to add a new menu item called 'news & events' which links to all posts categorised with that name. Problem is the css isn't styling the link as per the rest of the navigation links (font / speech bubble on rollover). I've added new lines of code to style.css but it's not picking up on the styling.
I did a test and added one of the existing links again to see how the css behaved, and that dropped out too. It seems like no matter what link I put in, the css styling won't apply to it.
Does anyone know why this is happening?
looks like you have each of the menu items getting assigned from its own style.
if you were to give it the class "nav-opinion" to the list item containing it this would work fine. what I would probably do is give a class to all of the side menu items instead of doing them each individually.
Solved it. In Wordpress there is a hidden menu for css classes. In there I added nav-opinion tk-museo-slab and now it works!
I am a CSS noob and I created a carousel using jCarousel. It works like it should as a page and with tabbed menus. The problem is the theme adds CSS to it when I go to /admin/config/system/site-information and make the view the default front page. It adds list bullets over each carousel item and changes the displayed item location.
I want to remove these bullets from the view but not the entire site. The development site can be seen at http://delphos.lib.oh.us/NewSite/
If you click on one of the "tabs" (red boxed buttons) the display problem goes away.
Any help would be appreciated.
TBG
Try looking for this line:
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {}
You can remove the whole line, or just remove the content attribute. Either should work.
Using the latest version of WP, is it possible to add inline style attributes to a wordpress menu item from within the wordpress menu panel?
So for example, I have a menu where for whatever reason, I need to position the menu items absolutely. I want my client to be able to go into the WP menu panel and simply add a style of "left: xx%" to any item.
I know this can be done via the stylesheet - but was hoping there was also a way to do this as described above.
Thanks!
Shortcodes Pro is a great plugin for this.