[Tbnk]

Yes it's resolved : I use a third party plugin for the menu and it's possible to customize the css.

[Tbnk]

Hi Jamie,

thank you again. I've no idea what have to look like the code //* your code here.

I tried <div>.....</div>, don't work. echo '<div>....</div>';, don't work. Can you give me a clue ?

I've on my page a div with a class and an id, just would like to "call it and place it" under the title with the background image behind.

[Tbnk]

Hi,

I removed the a "static" thing about header in the CSS and it works perfectly !

As said above, I juste replace "page" by "product" and it works. 🙂

Just don't know how to add something else that the title. Can I just add a div, attribute an ID or a class and then add something in functions.php in order to place it just under the title, inside the "background image zone" !?

Thanks a lot !

[Tbnk]

Well that's a good start !!! 🙂 🙂

In functions.php I replaced this if ( has_post_thumbnail() && is_page() && !is_page_template() ) by this if ( has_post_thumbnail() && is_product() ).

It works : I've the featured image in background as expected, but on mobile, the menu becomes white with white typo instead of black with white typo.

I'll watch the CSS, I think I'll be able to fix it and share the result.

And finally my question is : how can I include with the title a div which I'll fill with WP-Views by Toolset, with an excerpt and other elements and then "tell" to the template, "after it's white"... !?

[Tbnk]

Hi Jamie,

I guess I've to change this :
if ( has_post_thumbnail() && is_page() && !is_page_template() )

But with what ?

It's for a single product page (theme/woocommerce/single-product.php), the template is called "Single Product Page Template"... I've no idea how to attribute this code to the good page.

For instance, here's the code of my single product page template :

<?php
/**
 * This file adds the Landing template to the Altitude Pro Theme.
 *
 * @author StudioPress
 * @package Altitude
 * @subpackage Customizations
 */

/*
Template Name: Single Product
*/

//* Add custom body class to the head
add_filter( 'body_class', 'altitude_add_body_class' );
function altitude_add_body_class( $classes ) {

   $classes[] = 'altitude-landing';
   return $classes;
   
}

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Add site header elements
add_action( 'genesis_header', 'genesis_header_markup_open', 5 );
add_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'genesis_header_markup_close', 15 );

//* Add navigation
add_action( 'genesis_header', 'genesis_do_nav', 12 );
add_action( 'genesis_header', 'genesis_do_subnav', 5 );

//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Add site footer widgets
add_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

//* Add site footer elements
add_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
add_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

//* Run the Genesis loop
genesis();

As you can see, it's the Landing Page Template, but I added the header with the menu (add_action rather than remove_action).

[Tbnk]

Where do I find the code ?

I'll try tomorrow and let you know. 😉

Thanks a lot !

[Tbnk]

In fact I use WP-Views by Toolset. I built my product page with a title on the top (same style as in homepage, but I can change it) and a 5 columns part. I planned to put that on a DIV with the background featured image (and main menu on it), like in your demo page.

Then, in another div, what remains of the product page : details, description, add-to-cart, related products, slider, all with regular white background.

Of course I can do it another way in order to have that result. But the idea was to have over the background feature image :
- the menu (like in homepage),
- the title of the product,
- excerpt,
- a row with 5 columns.

Thanks a lot !

[Tbnk]

Hi,

thanks for your reply.

I just need 1 picture, like the first one on the homepage of Altitude (so with the same CSS) : behind the menu, around 574px height and the dark color gradation.

It's for the product page : each product has a featured image and I would like this image as "background top image". 🙂

[Tbnk]

That answers my question ! Thank you Braddalton !

[Author]

Posts