Woocommerce category pages

I’m trying to add shortcode to archive-product.php so that I can style the top of the category pages on a woocommerce store.

I’ve finally managed to make the code work, and it’s now displaying the header image and the sub menu, but it’s changed the background colour of the page, and knocked at the alignment of the items. What have I done wrong in the code?!

Is there an easier way to style the category pages?

Thanks!!

<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.3.0
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}

get_header( ‘shop’ );

/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper – 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb – 20
* @hooked WC_Structured_Data::generate_website_data() – 30
*/
do_action( ‘woocommerce_before_main_content’ );

?>

<?php echo do_shortcode(“[av_slideshow_full size='featured' min_height='0px' stretch='' animation='fade' autoplay='false' interval='5' control_layout='av-control-hidden' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' custom_class='']
[av_slide_full slide_type='image' id='669' video='http://' mobile_image='' video_format='' video_ratio='16:9' title='Shop' custom_title_size='50' custom_content_size='' caption_pos='caption_left' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' font_color='custom' custom_title='#ffffff' custom_content='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size=''][/av_slide_full]

[/av_slideshow_full]

[av_submenu which_menu='' menu='22' position='center' color='alternate_color' sticky='aviaTBsticky' mobile='disabled' custom_class='']
[av_submenu_item title='Menu Item 1' link='' linktarget='no' button_style='']
[av_submenu_item title='Menu Item 2' link='' linktarget='no' button_style='']
[/av_submenu]“); ?>

<header class=”woocommerce-products-header”>
<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>
<h1 class=”woocommerce-products-header__title page-title”><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>

<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description – 10
* @hooked woocommerce_product_archive_description – 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
</header>
<?php

if ( have_posts() ) {

/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked wc_print_notices – 10
* @hooked woocommerce_result_count – 20
* @hooked woocommerce_catalog_ordering – 30
*/
do_action( ‘woocommerce_before_shop_loop’ );

woocommerce_product_loop_start();

if ( wc_get_loop_prop( ‘total’ ) ) {
while ( have_posts() ) {
the_post();

/**
* Hook: woocommerce_shop_loop.
*
* @hooked WC_Structured_Data::generate_product_data() – 10
*/
do_action( ‘woocommerce_shop_loop’ );

wc_get_template_part( ‘content’, ‘product’ );
}
}

woocommerce_product_loop_end();

/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found – 10
*/
do_action( ‘woocommerce_no_products_found’ );
}

/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end – 10 (outputs closing divs for the content)
*/
do_action( ‘woocommerce_after_main_content’ );

/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar – 10
*/
do_action( ‘woocommerce_sidebar’ );

get_footer( ‘shop’ );