Search result archive 2 columns

[Lobsterass]

Hi!

I’m trying to make search result archive pages global sidebar + 2 columns of products. Search results flash for 0.5 second and then disappear when I select:

Archives > Masonry > Global > Columns 2

What’s up with that?

http://webshop.securitybrands.se/

Also, I would like to remove meta on archive pages but this does not work:

.archive .p-meta {
display: none !important;
}

Please advice.

<3

[tristup]

Hi @Lobsterass,

Unfortunately, the issue can’t be reproduced in the local environment. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Lobsterass]

OK, secure note added above.

[tristup]

Hi @Lobsterass,

I have replicated the same settings, but the issue can’t be reproduced, there might be a few different reasons behind the issue you are having. I would suggest you troubleshot a few common issues to find the reason behind it.

1.Plugin Conflict
2.Child Theme Related issue
3.CSS/JS Customization
4.Disabling Cache

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If that does not help, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Lobsterass]

Hi!

1. I turned off all plugins
2. I switched to main theme
3. I removed all CSS
4. I have no active cache

Problem is still present. Please advice.

I have done the custom work from this thread I found in the forum,

[christian]

Hey @Lobsterass,

Your home page is not a normal archive page. It’s a product category page so WooCommerce settings would apply. Set it in Theme Options > WooCommerce.

Thanks.

[Lobsterass]

Sorry, but changing the number of columns on the main shop page was not the question.

What I want is this:

1. I want the search bar in the navigation not to be buggy and to show search results. Try to search for “USB”, for example and see what happens. I see the searched items for a millisecond and then they disappear.

2. When the search results eventually do show normally, I would like to make the search results 2 or 3 columns instead of the ugly 1 column default.

<3

[ruenel]

Hello @Lobsterass,

After further investigation, I have found out that this is a bug. The masonry layout does not work in the archive or search layout. I already have informed our developers so that they can take action and resolves this issue swiftly. A patch update will be releasing very soon.

Please bear with us.

[alexander]

Hi @Lobsterass,

We’re still looking into an official solution for this that will be in a future update, but for now this code will get things working again. You can add this to functions.php of a child theme:

add_filter( 'post_class', function($classes, $class = '', $post_id = 0 ) {

	if ( $post_id && in_array( get_post_type( $post_id ), array( 'product', 'product_variation' ), true ) ) {
		if (is_search() || is_archive()) {
			$classes[] = 'hentry';
		}
	}

	return $classes;

}, 25, 3);

This will add the hentry class to products which is needed for isotope to work correctly.

[Lobsterass]

Could you please check it again? I can’t get that to work properly. I put it in my pro child functions.php.

[alexander]

Hi @Lobsterass,

Take a look at it now. It looks like your child theme wasn’t active. I activated it and the search is working.

[Lobsterass]

Hi!

Weird! Works now. Thanx!

Could you please just tell me how to remove search result meta and paragraph? I just want the title and the price just like in the webshop. I thought that setting was under Theme Options > Blog > Archives but nothing changes when I use that.

I tried this but it doesn’t work.

.x-iso-container-posts.cols-3 .p-meta {
display: none;
}

[prakash_s]

Hello @Lobsterass,

The given custom CSS code is working fine at my local development site. I checked your site I can’t find your custom CSS code. In case if you have added this custom CSS code then it might be any syntax error. I would suggest you copy your custom CSS code and check it through “Csslint”.

Hope it helps
Thanks

[Lobsterass]

I have copied the code from your demo. It is warning me about your code. I have made some changes to it, but the warnings are just as much from your code. Could you please tell me what’s wrong about your code?

/* ===========================
// TABLE OF CONTENTS
// ---------------------------
// 01. Reboot
// 02. Shared Content
// 03. WooCommerce
// 04. Blog
// 05. Recent Posts
// 06. Pagination
// 07. Footer
// 08. Hidden Elements
// 09. Responsive Styles
// ======================== /
/ Reboot
// ------------------------ */

.x-navbar {
border: 0;
box-shadow: none;
}

.x-btn-navbar.collapsed,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
}

.entry-wrap {
border-radius: 0;
box-shadow: none;
}

.x-btn,
.button,
[type=“submit”],
.x-btn:hover,
.button:hover,
[type=“submit”]:hover {
font-size: 15px !important;
border-width: 1px;
border-radius: 0px;
padding: none;
letter-spacing: 0px;
text-transform: none;
text-shadow: none;
}

.x-nav-tabs > .active > a,
.x-nav-tabs > .active > a:hover {
box-shadow: none;
}

.x-nav-tabs,
.x-tab-content {
border-color: white;
box-shadow: none;
}

.x-alert-block {
border: 0;
border-radius: 2px;
padding: 1.2em 1.15em;
box-shadow: none;
}

select,
textarea,
input[type=“text”],
input[type=“password”],
input[type=“datetime”],
input[type=“datetime-local”],
input[type=“date”],
input[type=“month”],
input[type=“time”],
input[type=“week”],
input[type=“number”],
input[type=“email”],
input[type=“url”],
input[type=“search”],
input[type=“tel”],
input[type=“color”],
.uneditable-input {
height: 3.1em;
border-color: rgb(217, 217, 217);
border-radius: 0;
font-size: 16px;
box-shadow: none;
transition-duration: 0s;
}

select:focus,
textarea:focus,
input[type=“text”]:focus,
input[type=“password”]:focus,
input[type=“datetime”]:focus,
input[type=“datetime-local”]:focus,
input[type=“date”]:focus,
input[type=“month”]:focus,
input[type=“time”]:focus,
input[type=“week”]:focus,
input[type=“number”]:focus,
input[type=“email”]:focus,
input[type=“url”]:focus,
input[type=“search”]:focus,
input[type=“tel”]:focus,
input[type=“color”]:focus,
.uneditable-input:focus {
box-shadow: none;
}

.x-container.offset {
margin-top: 45px;
margin-bottom: 90px;
}

/* Shared Content: Blog,
// WooCommerce, and Recent
// Posts
// ------------------------ */

.entry-product,
.has-post-thumbnail .entry-featured,
.blog .x-main.full > article,
body .x-recent-posts a {
border: 0 !important;
box-shadow: none;
}

.entry-product,
.blog .x-main.full > article,
body .x-recent-posts a {
transition-duration: 0.3s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
}

.entry-product:hover,
.blog .x-main.full > article:not(:first-child):hover,
body .x-recent-posts a:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
}

.woocommerce li.product .entry-header,
.blog .x-main.full > article:not(:first-child) .entry-wrap,
div.x-recent-posts .x-recent-posts-content {
padding: 1.5625em 1.95em;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
margin: 0;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0px;
line-height: 1.75;
white-space: normal;
color: #000000;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title a,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
color: #000000;
}

/* WooCommerce
// ------------------------ */

.woocommerce li.product {
box-shadow: none;
overflow: visible;
margin-bottom: 2% !important;
margin: 0 2% 2% 0 !important;
}

.woocommerce li.product .onsale {
top: 6px;
left: 6px;
width: 4em;
height: 2.5em;
border-radius: 0px;
line-height: 2.5em;
text-shadow: none;
box-shadow: none;
transform: rotate(0deg);
pointer-events: none;
}

.woocommerce .entry-wrap {
padding: 45px 0 0;
}

.woocommerce li.product .entry-wrap {
padding: 0;
box-shadow: none;
}

.woocommerce li.product .entry-header h3 {
font-size: 1.05rem;
letter-spacing: 0.015em;
line-height: 1.2;
}

.woocommerce .price {
font-size: 1rem;
letter-spacing: 0.002em;
}

.woocommerce li.product .entry-header .price > .amount,
.woocommerce li.product .entry-header .price > ins > .amount {
font-size: 1em;
line-height: 1;
color: currentColor;
}

.quantity input[type=“number”] {
border-color: black;
}

.woocommerce-tabs .x-tab-content .x-tab-pane {
padding-left: 0;
padding-top: 0;
}

.woocommerce .quantity input[type=“number”] {
font-size: 16px;
border-color: rgb(39,79,158);
color: rgb(39,79,158);
}

.single_add_to_cart_button,
.checkout-button,
.apply_coupon,
.update_cart {
padding: 0.7em 1.125em;
}

.woocommerce .cart .actions > input,
.woocommerce .cart .actions > button {
padding: 0.7em 1.125em;
}

.woocommerce-cart-form,
.woocommerce-cart-form a,
.woocommerce label,
.woocommerce table th,
.woocommerce table td,
.woocommerce .cart_totals,
.woocommerce-order-overview li {
color: rgba(0, 0, 0, 0.8);
}

.woocommerce-cart-form table th {
padding: 3em 0.652em 3em 0;
}

.cart_totals table td,
.cart_totals table th {
padding: 1em 1em 1em 0;
}

#order_review table td,
#order_review table th {
padding: 1em 1em 1em 0;
}

.woocommerce-order-details {
padding: 3em 0em
}

.woocommerce-order-details table td,
.woocommerce-order-details table th {
padding: 1em 1em 1em 0;
}

.woocommerce-cart-form td {
padding: 1em 0em;
}

.woocommerce thead {
text-transform: uppercase;
}

.widget_shopping_cart_content .x-interactive {
background: none !important;
border-color: #ebebe7 !important;
box-shadow: none !important;
}

.woocommerce-checkout form .payment_methods label {
padding: 0;
}

.woocommerce th {
font-weight: normal;
}

.woocommerce table td,
.woocommerce table tr {
border-color: #ebebe7;
}

.woocommerce-result-count,
.woocommerce-ordering {
opacity: 0;
}

.woocommerce li.product {
margin-bottom: 8.5%;
}

li.woocommerce-MyAccount-navigation-link a {
padding: 0.9em 1em;
font-size: 14px;
}

input#rememberme {
margin-right: 0.5em;
}

.woocommerce-form-login__rememberme {
padding: 0 0 1em 0;
}

.woocommerce .upsells ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
box-shadow: none;
border-radius: 0;
border: none;
}

.e85-6.x-anchor-toggle .x-graphic-icon[class*=“active”] {
color: #272727;
}

.e85-6.x-anchor-toggle {
border-radius: 0;
}

.x-masthead .crafty-cart .x-anchor-text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.1rem;
top: -0.1rem;
font-weight: normal;
font-size: 13px;
background-color: #777;
color: #fff;
border-radius: 50%;
min-width: 1.2em;
height: 1.2em;
}

.x-masthead .crafty-cart .x-anchor-text span {
font-size: 10px;
color: #FFF !important;
}

.woocommerce .cart .actions .coupon {
padding-top: 4em;
}

.single-product .site{
background-color: #fff;
}

.woocommerce-Price-currencySymbol {
padding-left: 0.22em;
}

.sku_wrapper {
color: rgb(39,79,158);
margin-right: 0.5em;
font-weight: 600;
}

.woocommerce .product_title {
font-size: 175% !important;
}

.woocommerce .related h2{
font-size: 140%;
}

/* Blog
// ------------------------ */

/*
// Main Layout
*/

.blog .x-main.full {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}

.blog .x-main.full > article {
width: 30.333%;
margin-top: 4em;
margin-left: 1.5%;
margin-right: 1.5%;
}

a.entry-thumb:hover img {
opacity: 1;
}

.entry-thumb {
background-color: transparent;
}

/*
// First Blog Entry
*/

.blog .x-main.full > article:first-child {
display: flex;
flex-flow: row wrap;
width: 100%;
}

.blog .x-main.full > article:first-child .entry-featured,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
}

.blog .x-main.full > article:first-child .entry-featured {
flex: 0 1 31.22%;
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
flex: 1 0 0%;
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
object-fit: cover;
}

.blog .x-main.full > article:first-child .entry-wrap {
flex: 1 0 0%;
padding: 45px;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-title {
font-size: 2.45em;
line-height: 1.3;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt {
margin: 40px 0 0;
font-size: 1.25rem;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt .more-link {
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.085em;
line-height: 1;
text-decoration: underline;
text-transform: uppercase;
color: #272727;
}

/*
// Single Post
*/

.single-post .x-main {
max-width: 720px;
margin-left: auto;
margin-right: auto;
font-size: 1.25rem;
line-height: 1.9;
}

.single-post .entry-featured {
position: relative;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}

.single-post .entry-featured:before {
content: “”;
display: block;
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 70%, #ffffff);
}

.single-post .entry-featured img {
height: 400px;
object-fit: cover;
}

.single-post .x-main .entry-content {
font-size: 1em;
}

.single-post .entry-wrap {
padding: 0;
}

.single-post .entry-wrap .entry-title,
#reply-title {
position: relative;
z-index: 2;
font-size: 3.05rem;
line-height: 1.3;
}

.single-post .entry-wrap .entry-title {
margin-top: -0.64em;
text-align: center;
}

.single-post .entry-wrap .entry-title:after {
content: “”;
display: block;
width: 100%;
max-width: 3em;
height: 1px;
margin: 1em auto;
background-color: currentColor;
opacity: 0.33;
}

#reply-title {
margin-top: 3.05em;
}

.logged-in-as {
font-size: 1em;
line-height: 1.4;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-rating label,
.comment-form-comment label {
font-size: 1em;
color: currentColor;
}

.comment-form-comment textarea {
min-height: 200px
}

.form-submit {
margin-top: 1em;
}

/* Recent Posts
// ------------------------ */

div.x-recent-posts a {
border-radius: 0;
padding: 0;
}

div.x-recent-posts .x-recent-posts-img {
border-radius: 0;
padding-bottom: 120%;
}

/* Pagination
// ------------------------ */

body .x-pagination {
overflow: hidden;
width: 100%;
height: auto;
margin: 100px 0 100px 0;
}

body .x-pagination a,
body .x-pagination span {
width: 30px;
height: 30px;
border: 1px solid #274F9E;
border-radius: 0;
padding: 0;
font-family: “PT Sans”,sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 30px;
text-align: center;
text-shadow: none;
letter-spacing: -0.05rem;
vertical-align: middle;
color: #274F9E;
box-shadow: none;
}

body .x-pagination a:hover {
color: #c8493f;
border-color: #c8493f;
}

body .x-pagination span.current {
text-shadow: none;
color: white;
background-color: #274F9E;
box-shadow: none;
}

/* Footer
// ------ */

.x-colophon.top {
border: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
}

.x-colophon.top .widget {
text-shadow: none;
}

.x-colophon.top > .x-container {
width: 100%;
max-width: none;
}

/* Responsive Styles
// ------------------------ */

@media (max-width: 1050px) {
.footer-form input[type=“text”] {
width: calc(100% - 102px);
}
}

@media (max-width: 767px) {
.blog .x-main.full > article,
.blog .x-main.full > article:first-child .entry-featured,
.blog .x-main.full > article:first-child .entry-wrap {
width: 100%;
flex: 1 1 auto;
}

.blog .x-main.full > article .entry-featured .entry-thumb img {
max-height: 320px;
object-fit: cover;
}
}

@media (max-width: 480px) {
.single-post .has-post-thumbnail .entry-featured {
float: none;
width: auto;
margin-right: 0;
}
}

/* Widget sidebar
// ------------------------ */

.widget ul li a {
color: rgb(35,12,11);
}
.widget ul li a {
border-bottom: none;
}

.widget ul {
border: none;
border-radius: 0px;
background-color: rgba(255,255,255,1);
box-shadow: 0px 1px 15px rgb(0 0 0 / 5%);
border-bottom: 1px solid rgba(0,0,0,.12);
}
.widget.widget_categories li ul, .widget.widget_product_categories li ul {
background-color: rgb(39,79,158,0.04);
}

/* Uber Menu
// ------------------------ */
.ubermenu-skin-clean-white .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target {
border-bottom: none;
padding-bottom: 0px;
}

[Lobsterass]

And you forgot to tell me how to remove the unnecessary meta and p text. I can’t see why anyone would like it like that on a webshop, so one would think that should be optional within the theme. It’s not a blog.

[tristup]

Hi @Lobsterass,

To remove the meta data and the description from the search result, you need to add the following custom CSS code into the Theme Options > CSS.

.search-results p.p-meta, .search-results .entry-content
{
    display:none;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Lobsterass]

Perfect! Thanx!

[marc_a]

Hi @Lobsterass,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.