Text in Store Header not alligned in Center

[Mang]

1. I have some text in the vendor store banner. The text is not aligned in the center of the white overlay. Please see store header.jpg.

If I choose a different theme, it get automatically aligned to the Center. Please see example, http://dev.wcvendors.com/vendors/lovaдфгдфг/

2. How can I make the store banner wide so that it spans the full width of the page and move the store widgets (on the left) down, near the products?

Summary

This is the link to the site, https://mangtum.com/store/havasu-store/

Thanks

[thai]

Hi There,

For #1, please add the following CSS under Customizer > Custom > Global CSS:

.wcv-store-grid__col.store-brand {
    display: none;
}
.wcv-store-grid__col.store-info {
    width: 100%;
    margin: 0;
    padding: 15px;
}
.wcv-store-grid__col.store-info h3 {
    margin-top: 0;
}

For #2, that is technically possible. However, that would fall beyond the scope of our support since it would require custom development.

Regards!

[Mang]

Hi,

I spoke with the plugin support to make the banner full width. They gave me this code for functions.php but it did not make the banner full width
add_action( ‘woocommerce_before_main_content’, array( $wcvendors_pro->wcvendors_pro_vendor_controller, ‘store_main_content_header’), 1 );

The other thing I realized is that the banner is full width in single product page but not on the store pages, irrespective of the above code.

Thanks

[rad]

Hi there,

You mean it shouldn’t have sidebars right? Or should the banner extend to browser edges like absolute full-width? It can’t be set to absolute full-width since it’s already within a container. But, you can disable the sidebar by adding this code to your child theme’s functions.php

  function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }
    
    if (  x_is_product() || x_is_shop() || x_is_product_category() || x_is_product_tag() ) return 'full-width';

    return $layout;

  }

Hope this helps.

[Mang]

Thank you Rad.

This is what the Plugin author has to say:

The code I gave you will make the banner the full width of the main container above the products and side bars in any 100% compatible WooCommerce theme. It doesn’t look like X theme has done this.

This is what it looks like with a compatible theme. Id suggest sending this image to your theme developers so you can explain clearly what you require.

Also I wanted to mention that initially the banner was not even showing, X-theme support gave me the below steps to show the banner in the vendor stores.

[rad]

Hi there,

Ah, that theme has a different layout than our theme and that’s the reason. But it doesn’t mean it’s not compatible, the display is just different. Plus, X and Woocommerce integration are based on woocommerce_content() standard where it uses single main templates for all woocommerce pages. It’s based on Woocommerce standard and there are many, the plugin only assumes that there is one standard that should be followed ( https://docs.woocommerce.com/wc-apidocs/function-woocommerce_content.html ).

Which means, it’s their plugin that is not compatible woocommerce_content() based integration.

If you wish to achieve that, then what you need is integrate that code in header template, because it’s the template the goes above the content and sidebar. Example, you can simply add this code to your child theme’s functions.php (assuming that you already removed the customization you made as you provided)

add_action('x_after_masthead_end', 'display_the_banner_here');

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {

//Add your banner code here, it's usually the function added/attached to  do_action( 'woocommerce_after_main_content' );

}
}

Now, what you need is add the code from your banner plugin. It has to be like this because X theme has different layout structure, it doesn’t revolve alone in Woocommerce template parts. It only wraps the existing Woocommerce template parts with the use of woocommerce_content().

Thanks

[Mang]

Thank you Rad for the detail reply, I will talk to the Plugin author.

Just wanted to clarify two things:

1. What does **(**assuming that you already removed the customization you made as you provided) mean? Do I need to remove the code provided by X-theme to show the banner in the first place or this code provided by plugin author to show the banner full width

add_action( ‘woocommerce_before_main_content’, array( $wcvendors_pro->wcvendors_pro_vendor_controller, ‘store_main_content_header’), 1 );

or the customization to remove the sidebars.

2. What does 'Now, what you need is add the code from your banner plugin’ mean? This is a multi-vendor plugin with several functionalities. Do I need to ask the plugin author for the code of banner?

Sincerely

[rad]

Hi there,

Yes, you can only apply the code that I provided assuming that you already removed the previous customization that you’ve done including all the codes and templates you added in the provided steps above.

And yes, you’ll need to get the code from the plugin author, I think it’s easier because that code is already existing and only attached to woocommerce_before_main_content'. Example,

add_action('x_after_masthead_end', 'display_the_banner_here');

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {

$wcvendors_pro->wcvendors_pro_vendor_controller->store_main_content_header();

}
}

Thanks.

[Mang]

I reverted the code provided by X-theme (the code is in my secure note above) to show the banner in the vendor store pages and added the below code in functions.php but now I can’t see the Store banner anymore, instead it has the main page slider in the store pages.

add_action(‘x_after_masthead_end’, ‘display_the_banner_here’);

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {

$wcvendors_pro->wcvendors_pro_vendor_controller->store_main_content_header();

}
}

Thanks

[rad]

Hi there,

I checked and the banner is added in the content, the code that I gave should display it after masthead and not in the content. Would you mind providing your admin and FTP login credentials? I’m not saying I could provide the complete solution, I just like to confirm if x_after_masthead_end hook is working properly.

Thanks!

[Mang]

Hey Rad, I really appreciate you looking into this.

[rad]

Hi there,

I checked and I’m correct, the hook x_after_masthead_end is not working since your current setup pick ups the legacy templates. The working code should be like this

add_action('x_after_view_global__slider-below', 'display_the_banner_here');

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {

//Add your banner code here, it's usually the function added/attached to  do_action( 'woocommerce_after_main_content' );

}
}

Now, you need to find out the banner code that should be displayed there, because this line triggers internal server error.

$wcvendors_pro->wcvendors_pro_vendor_controller->store_main_content_header();

PHP Fatal error: Call to a member function store_main_content_header() on null in /home/pramodg29/public_html/Mangtum.com/wp-content/themes/x-child/functions.php on line 474

Hence, it’s not the correct one and I can’t tell which is correct since it’s your Vendor pro plugin. I also tried this one,

do_action('woocommerce_before_main_content');

But it’s not working, so my question is does this one really works?

add_action( 'woocommerce_before_main_content', array( $wcvendors_pro->wcvendors_pro_vendor_controller, 'store_main_content_header'), 1 );

That code is to integrate your vendor pro to woocommerce hooks. And we call do_action() to manually trigger woocommerce_before_main_content action, in short, it should be compatible now. I think you should contact the plugin author for that. The above code should display it, but their codes aren’t working.

Thanks!

[Mang]

Hello Rad,

I will talk to the plugin author. Just one thing - was there any change done on any file during testing, because when I login into the website I get the below error and warning.

Thanks

[rad]

Hi there,

Ah, I enabled the WP_DEBUG, it should be off now

define('WP_DEBUG', false);
define('WP_DEBUG_DISPLAY', false);   
define('WP_DEBUG_LOG', false);   

Thanks!

[Mang]

Thank you Rad,

I did some more testing and added the below function to functions.php and it does display the banner full width so I don’t think there is any problem with the plugin code, it is the way we are rending or calling it or whatever we want to say. Please see the store link page in secure note. The only thing it happens is it put the banner below the main slider.

add_action(‘x_after_view_global__slider-below’, ‘display_the_banner_here’);

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {

//Add your banner code here, it’s usually the function added/attached to do_action( ‘woocommerce_after_main_content’ );
do_action( ‘woocommerce_before_main_content’, array( $wcvendors_pro->wcvendors_pro_vendor_controller, ‘store_main_content_header’), 1 );

}
}

[rad]

HI there,

That’s weird, but glad it’s working now. Yes, it will put the banner under the slider, which is also above the content/sidebar. That’s what it looks like when you provided a screenshot of a compatible theme. What’s left is removing the slider. The question is how should it look like?

Thanks.

[Mang]

We need to just remove the slider so that it looks something like this https://www.etsy.com/shop/GemAbyss?ref=seller-platform-mcnav

One thing Rad, when the banner was not even showing, it was showing the main page slider with all the products from the vendor store below the slider, on the Vendor store pages. X-theme gave the code (please see the secure note from one day back) to replace the slider with the banner but the banner was not full width (probably contained in a container). So I was thinking if we can club the above code with the recent code we put in functions.php to replace the slider but make the banner full width. Not sure if this work, but just a thought.

[rad]

Hi there,

Sliders are only displayable in pages where slide settings are available. Archive pages such as store page, category, product page doesn’t have slider settings so I’m not really sure how it’s added there. Are you sure you removed the customization related to that main slider?

Please try cleaning your functions.php code too, remove all related slider’s custom code.

Maybe you still have the custom template for _slider-below.php too. Please remove that too

Thanks!

[Mang]

Hi Rad,

I was able to work it out, ofcourse with all your help, without which it was not possible. I kept the customization in _slider-below.php and the code added in functions.php, just removed the customization in archive-product.php and woocommrce.php, so we are all good on this. But three things:

1. Now that the banner is full width, when you select a Category, the text, Home/Category shows on the leftmost edge of the page. Earlier it used to show where the product listing starts. Please see the attached image.

2. On the Vendor Store Page, the store icon, store name, ratings and the store description start from the left of the page, is it possible to have them start from the same line where the widgets start in the sidebar?

3. The Vendor ratings page still does not have the banner full width. Can we add something to the function’s if statement:

function display_the_banner_here () {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() )

Thank you

[rad]

Hi there,

1. Is it custom code as well or part of the banner? Maybe that one requires the custom template this time. Or, just add this code to your global custom javascript as a snippet.

jQuery( '.archive .woocommerce-breadcrumb' ).prependTo('.x-main');

2. How did you compose your banner? It should be configured in your banner, as by checking your banner code, there is no container that separates the text from image banner, hence, pushing the text will also push the image. Just how it’s displayed on your rating page. Example, this is your banner code

<div class="wcv-store-address-container wcv-store-grid ">
	
	<div class="wcv-store-grid__col wcv-store-grid__col--1-of-2 store-address">	  
			<a href="http://maps.google.com/maps?&q=Scottsdale, AZ"><address><i class="fa fa-location-arrow"></i>Scottsdale, AZ</address></a>	</div>
	<div class="wcv-store-grid__col wcv-store-grid__col--1-of-2 store-phone">	  
				</div> 
	
</div>
<img src="https://mangtum.com/wp-content/uploads/2017/06/Black-Spinel-faceted1-150x150.jpg" alt="" class="store-icon" /><h3>Havasu Store</h3>


	<a href="https://mangtum.com/store/havasu-store/ratings/">	<i class='fa fa-star'></i><i class='fa fa-star'></i><i class='fa fa-star'></i><i class='fa fa-star'></i>	<i class='fa fa-star-o'></i>	( 3 ratings ) 	 </a>
<p>IT'S A PROBLEM EVERY PARENT FACES…
You know your kids need fruits and vegetables. But they beg for snacks loaded with salt, saturated fat, and high-fructose corn syrup—and zero real nutrition. What's a well-meaning parent to do?
You give them Daily Sunshine, the healthy smoothie kids love—and parents feel great about serving! Daily Sunsvvvvvputs an end to the kitchen table battles, the bargaining, and the compromises. Now everyone can be happy at snack timemmmmmmmmmmmmmm

&nbsp;</p>

	<center> <a href="https://mangtum.com/front-end-pm-page/?fepaction=newmessage&#038;fep_to=13" class ="button"> Contact Store Owner </a></center>  

The code should be something like this

<!-- FULL WIDTH BANNER START HERE -->
<div class="wcv-store-address-container wcv-store-grid ">
	
	<div class="wcv-store-grid__col wcv-store-grid__col--1-of-2 store-address">	  
			<a href="http://maps.google.com/maps?&q=Scottsdale, AZ"><address><i class="fa fa-location-arrow"></i>Scottsdale, AZ</address></a>	</div>
	<div class="wcv-store-grid__col wcv-store-grid__col--1-of-2 store-phone">	  
				</div> 
	
</div>

<!-- FULL WIDTH BANNER START HERE -->

<!-- BOXED CONTENT START HERE -->
<div class="x-container max width"><!-- this is the box wrapper -->

<img src="https://mangtum.com/wp-content/uploads/2017/06/Black-Spinel-faceted1-150x150.jpg" alt="" class="store-icon" /><h3>Havasu Store</h3>


	<a href="https://mangtum.com/store/havasu-store/ratings/">	<i class='fa fa-star'></i><i class='fa fa-star'></i><i class='fa fa-star'></i><i class='fa fa-star'></i>	<i class='fa fa-star-o'></i>	( 3 ratings ) 	 </a>
<p>IT'S A PROBLEM EVERY PARENT FACES…
You know your kids need fruits and vegetables. But they beg for snacks loaded with salt, saturated fat, and high-fructose corn syrup—and zero real nutrition. What's a well-meaning parent to do?
You give them Daily Sunshine, the healthy smoothie kids love—and parents feel great about serving! Daily Sunsvvvvvputs an end to the kitchen table battles, the bargaining, and the compromises. Now everyone can be happy at snack timemmmmmmmmmmmmmm

&nbsp;</p>

	<center> <a href="https://mangtum.com/front-end-pm-page/?fepaction=newmessage&#038;fep_to=13" class ="button"> Contact Store Owner </a></center>  


</div><!-- this is the box wrapper -->
<!-- BOXED CONTENT ENDS HERE -->

The <div class="x-container max width"> is X’s main container layout that aligns sidebar and content. That’s what missing in your code, currently, it’s just a raw content with no structure at all.

3. Hmm, I’m not sure how that banner got there. It’s inside the content instead of the masthead per code that I gave. And does your Vendor Pro has its own condition to check if it’s a rating page? Because this condition if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) doesn’t apply to that page anymore. You would need something like if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || is_vendor_rating_page() ). I’m not really sure but they should have something like that.

Thanks!