Product thumbs in carousel messed up on mobile view

[lobsterass]

Done. This time the site almost works. All individual product pages go completely blank though.

Is anything that has to do with my custom changes:

Fix blurry product image
Copy /woocommerce/single-product/product-image.php to your child theme (inc structure).
2) Edit line 92(and another place), replacing 800 with the width of image you want 807:
$image = aq_resize( $image_link, 800, NULL, true, false);

Put product title in right text box instead of the default top left corner
1) Add this to your custom css:
.woocommerce div.product .entry-title {
 display: block;
 margin-bottom: 40px;
}

2) Open up content-single-product.php in the woocommerce folder and replace:
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<div class=”entry-title” itemprop=”name”><?php the_title(); ?></div>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>
with
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div class=”entry-title” itemprop=”name”><h1><?php the_title(); ?></h1></div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>

[lobsterass]

And here is exactly all custom changes. Please tell me what part is not working with the update.

Fix blurry product image
Copy /woocommerce/single-product/product-image.php to your child theme (inc structure).
2) Edit line 92(and another place), replacing 800 with the width of image you want 807:
$image = aq_resize( $image_link, 800, NULL, true, false);

Product image – pop-up zoom image – move nav arrows to sides
.pp_hoverContainer {
left: 0;
width: 100%!important;
}

Product image – fix squished pop-up zoom image
#fullResImage {
height: auto!important;
}

Remove “Alla vanliga frågor” at FAQ:s
.faqs-wrap h3:first-child {
display: none;
}

Product image: remove image name in pop-up image
div.pp_woocommerce .pp_description {
display: none!important;
}

Shop page: remove product price
.list-best-sellers span.amount { display:none;
}

Footer underlined text like demo
#footer h4:before{border-color:#333333;
}
#footer .widget ul li, #footer .widget_categories ul, #footer .widget_archive ul, #footer .widget_nav_menu ul, #footer .widget_recent_comments ul, #footer .widget_meta ul, #footer .widget_recent_entries ul, #footer .widget_product_categories ul{border-color:#333333;
}

Shop: Remove breadcrumbs + Page title
.woocommerce-page .page-heading {
display: none;
}

Shop: Remove “showing 1-24 products etc”in top left corner
.woocommerce-count-wrap {
display: none;
}

Shop: Remove ordering of products in top right corner
.woocommerce-ordering {
display: none;
}

woocommerce-ordering

To be able to edit Portfolio URL:s
Please open to edit portfolio-type.php at /themes/neighborhood/includes/custom-post-types
Find this code at line 49
‘rewrite’ => false,
Replace with
‘rewrite’ => array(‘slug’=>’portfolio’),

Put product title in right text box instead of the default top left corner
1) Add this to your custom css:
.woocommerce div.product .entry-title {
 display: block;
 margin-bottom: 40px;
}

2) Open up content-single-product.php in the woocommerce folder and replace:
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<div class=”entry-title” itemprop=”name”><?php the_title(); ?></div>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>
with
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div class=”entry-title” itemprop=”name”><h1><?php the_title(); ?></h1></div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>

Resize the product image / details area
Posted on November 5, 2013 by Swift Ideas – Ed
If you’d like to resize the image/product details area, then you can do so with the following custom css:
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}
The widths must add up to 97%.
You need to put your custom css for the product page in a media query:
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}
Should be:
@media only screen and (min-width: 769px) {
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}

Removes date in portfolio
.portfolio-details-wrap .date {display: none;}

Slow loading time on site: NOT WORKING?
Please open to edit wp-config.php at wordpress installation root directory and put this code
define(‘WP_MEMORY_LIMIT’, ‘132M’);
as first of the statement . It will fix your issue sure .

Removes white space over blog header rev slider:
.single-post .inner-page-wrap {
margin-top: 0;
}

Makes black lines grey under categories in FILTER OUR WORK:

.filter-wrap ul li {
border-bottom: 1px solid #a9a9a8!important;
}

Keeps portfolio FILTER OUR WORK open by default:

.filter-slide-wrap {
display: block!important;
}

Portfolio filter light with black text and turquoise accent

.filter-wrap ul li a {
color: #737373!important;
}

.filter-wrap ul li a:hover {
color: #47c1c5!important;
}

Is it not even possible to make the featured image 2/3 columns?
You can either:
1) Not upload a featured image, but add a thumbnail image in the options for the page.
2) Upload a featured image, but set the media display to ‘none’

SLOW DOWN TESTIMONIAL
To change the speed, edit /js/functions.js
slideshowSpeed: 6000,
TO:
slideshowSpeed: 8000,

Testimonial change class from h4 to h2

change line 95 in testimonial-slider.php in swift-framework/page-builder/shortcodes/
$output .= ($title != ” ) ? “\n\t\t\t”.'<div class=”heading-wrap”><h4 class=”spb_heading spb_text_heading”><span>’.$title.'</span></h4></div>’ : ”;
to:
$output .= ($title != ” ) ? “\n\t\t\t”.'<div class=”heading-wrap”><h2 class=”spb_heading spb_text_heading”><span>’.$title.'</span></h2></div>’ : ”;
CSS:
.spb_wrapper.slider-wrap .heading-wrap h2 {
 border-bottom: 2px solid #222222;
 display: inline-block;
 font-size: 20px;
 font-weight: normal;
 padding-bottom: 5px;
}

Hardcode FILTER OUR WORK to VÄLJ KATEGORI
sf_portfolio.php line 323

Change class of portfolio item title to H2 and H3

In the swift-framework folder > sf-content-dispaly > You need to edit line 271 in sf-portfolio.php
headline
.= ‘<h4 class=”portfolio-item-title” itemprop=”name headline”>‘. $item_title .’</h4>’. “\n”;
}
To:

.= ‘<h2 class=”portfolio-item-title” itemprop=”name headline”>‘. $item_title .’</h2>’. “\n”;
}
And:

$portfolio_items_output .= ‘<h5 class=”portfolio-subtitle” itemprop=”alternativeHeadline”>’.$item_subtitle.'</h5>’. “\n”;
}

to:

$portfolio_items_output .= ‘<h3 class=”portfolio-subtitle” itemprop=”alternativeHeadline”>’.$item_subtitle.'</h3>’. “\n”;
}

and then add this css:
.portfolio-item h2.portfolio-item-title {
font-size: 15px;
font-weight: normal;
line-height: 18px;
margin-bottom: 4px;
margin-top: 4px;
text-align: center;
}

.portfolio-item h3.portfolio-subtitle {
font-size: 13px;
font-weight: normal;
line-height: 15px;
margin-bottom: 4px;
text-align: center;
}

OM OSS – NAMES UNDERLINED h5:s

.heading-wrap h5 {
 border-bottom: 2px solid #222;
 display: inline-block;
 margin-bottom: 5px;
 padding-bottom: 10px;
 text-align: center;
 font-size: 18px;
}
.spb_wrapper .heading-wrap {
 text-align: center;
}
.spb_wrapper h6 {
 font-size: 15px;
 font-weight: normal;
 text-transform: none;
}

Testimonial remove white space bottom

Try to put this in Custom CSS class in that widget in page builder.
mb0 mt0

More filter our work spacing (not used)

.has-no-sidebar .spb_portfolio_widget .filter-wrap {
margin-bottom: 20px;
}

More top shadow Rev Slider (don’t work)

.header-shadow #header-section:before {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

less bottom shadow Rev Slider
.tp-bannershadow.tp-shadow1 {
opacity: 0.3;
}

Removes + sign in portfolio thumb

.thumb-slider .open-item {
display: none;
}

Underlined H2

.full-width-text h1, .full-width-text h2 {
border-bottom: 2px solid #222222;
display: inline-block;
font-size: 20px;
font-weight: normal;
line-height: 24px;
margin-bottom: 5px;
padding-bottom: 5px;
}

To centre the text, wrap it in a div with the class ‘heading-wrap’ for e.g.
<div class=”heading-wrap”>
<h2 style=”text-align: center;”>Grafisk design i Stockholm OWN TEXT BLOCK</h2>
</div>
To remove the spacing, make sure you have pb0 added to the extra class field for the heading and for the text below make sure you have pt0.

EXAMPLE HEADING:
<div class=”heading-wrap”>
<h1 style=”text-align: center;”>Grafisk design i Stockholm</h1>
</div>

Extra class in widget box for heading H1 or h2:
pb0 mb0 mt0 bb0 bt0 no-arrow pb0

Extra class in body text box:
pt0 mb0 mt0 bb0 bt0 no-arrow

PORTFOLIO ITEM PAGES 25px space – detta here i textblocket:
mt0 bt0 bb0 no-arrow

Space box btwn header + body:
30px

Space box btwn header + element:
50px

Space box btwn text/element + bottom:
80px

Bild:
Centrerad + 25px padding bottom

H1 space above:
OM OSS utan rev slider: 115px (ingen space widget)
INDEX med rev slider: 90px (space widget 30px)

BLOG CODE FROM BRETT

div.angela { color:blue; }
div.angela a:link { color:red; }
div.angela a:hover { color:red; }
div.angela h1 { color:red; }
div.angela h2 { color:green; }
div.angela p { color:purple; }
div.angela img { border:3px solid red; }

HOW TO UPDATE WITH CHILD
No you don’t copy all the themes files to the child theme, only ones that have been changed and ones that are supported in the child theme (root folder files)
1. Activate 1.71 and delete 1.7
2. Create child theme (with only a css file) and activate
3. Make your changes to your style.css file
4. If you make changes to php files, save them in child theme
Do not copy the full content of functions.php of the parent theme into functions.php in the child theme. The structure of functions.php is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.
<?php //Opening PHP tag

// Custom Function to Include
function favicon_link() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />’ . “\n”;
}
add_action( ‘wp_head’, ‘favicon_link’ );

?> //Closing PHP tag

HOW TO GET SHADOW 1 FROM REV SLIDER ON REGULAR IMAGE TOO
.spb_single_image.shadowframe {
background: transparent url(http://monroedesign.se/wp-content/plugins/revslider/rs-plugin/assets/shadow1.png) no-repeat;
background-position: center bottom;
padding-bottom: 20px;
}
.shadowframe img {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

HOW TO EDIT SHADOW 1 ON REV SLIDER ONLY ON PAGES NOT TOP OF PAGES (messed up shadow on other pages so I removed it)
}
.tp-bannershadow.tp-shadow1 {
bottom: -28px!important;
}

ICON IMAGES IN TURQOISE
update folder:
images > list-icons

SHOP – REMOVE PRICES + CENTER TITLES + REDUCE PADDING UNDER THUMB + REMOVE BORDER LINE IN TOP
.woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {
border-top: none;
}
.posted_in {
display: none;
}
.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
display: none;
}
ul.products li.product .product-details {
width: 100%;
}
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
text-align: center;
}

MAKING NAV BUTTONS MOVE CLOSER UP TO SLIDER ON MEDIA PAGE (NECESSARY ON MOBILE)
@media only screen and (max-width: 768px) {
}
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -70px!important;
}

PROCUCT – HIDE LONG PROD DESCRIPTION + ASK A QUESTION ABOUT PROD + CATEGORY (not working)
#product-accordion {
 display: none;
}
.summary .product_meta {
 display: none;
}

.variations_form {
overflow: visible;
}
.summary-top .product-navigation {
position: absolute;
right: 0;
top: 20px;
}
.summary-top {
padding-bottom: 0;
}

SHOP CART COUPON FIELD WIDER
.woocommerce .coupon input.input-text{width:61%;padding:12px 10px; }
}

SHOP – REMOVE “READ MORE” HOVER EFFECT ON PRODUCT THUMBS
div.shop-actions.clearfix{
display: none!important;
}

PRODUCT CAROUSEL ON INDEX FIX MESSED UP LOOKING (DOUBLED) THUMBS
not working
figure.media-wrap .rev_slider_wrapper img {
height: inherit!important;
}

Portfolio pagination = next project link – overlaps on mobile view
1. Those links get 2 lines instead of one on mobile view. (not used)
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.pagination-wrap .nav-previous, .pagination-wrap .nav-next { float: none; max-width: 100%; text-align: left; }
}

2. The links could be called PREVIOUS PROJECT and NEXT PROJECT.
2. If you want to change that you need to edit the file, open up single-portfolio.php and in line #186 and #187 ( last lines ) you saw a line like this
<div class=”nav-previous”><?php next_post_link(__(‘<i class=”fa-angle-left”></i> <span class=”nav-text”>%link</span>’, ‘swiftframework’), ‘%title’); ?></div>
<div class=”nav-next”><?php previous_post_link(__(‘<span class=”nav-text”>%link</span><i class=”fa-angle-right”></i>’, ‘swiftframework’), ‘%title’); ?></div>

change that to,
<div class=”nav-previous”>Next Project</div>
<div class=”nav-next”>Previous Project</div>
1. I hope it won’t overlap after this, if that still overlaps after this change, use this Custom CSS in Theme Options.

[lobsterass]

Also, is any of this the reason to why Google does not recognize my headline classes? A SEO pro told me Google doesn’t see a single H1 or H2 on my index page.

[lobsterass]

The product thumb carousel on index still has the same problem after update.

[Swift Ideas – Ed]

Impossible to tell from all that code. Enable WP_DEBUG and you should see reference to the error on the product page.

Just checked carousel and looks great here – please clear your cache. https://www.dropbox.com/s/kf12h6uiczc2o9l/Screenshot%202014-08-29%2022.13.59.png?dl=0

– Ed

[lobsterass]

Hi,

I have now done enabled wp debug in the wp-config.php. I’ve spent 2 hours trying to google what it is and how I’m supposed to use it. I still get nothing on my product pages and I’ve been clearing cache, deinstalled Chrome twice and I still don’t get it. My stationary Mac broke down last week, so in addition to all this (and being sick) I only have my old laptop and to work on.

Could you please be a little more specific?

The only good thing that happened to me during my last 19 hours of trying to fix this, is that the product carousel thumbs seems to look good now. Thank you for that.

It says that this wp debug should not be used on a live site. How do I do this then?

Please help me. I would really appreciate some extra help right now.

A

[Swift Ideas – Ed]

The entire source for the product page is:

<div class="images">
	
	

So I can only assume something is up with your customisations. Your best bet is removing all the custom code to test quickly – to confirm if the cause is in-fact in there. Then you’ll need to re-add or delete section by section of custom code until it’s resolved.

Unfortunately due to the sheer scale of the code you have, it would be take too much time for me to check through it all.

Good luck!

Disable WP_DEBUG, it won’t show an error as there isn’t one – just the only code being output is the code above.

– Ed

[lobsterass]

Is it something with my useless Child-installation? I’m about to give up.

[Swift Ideas – Ed]

Best thing you can do is load up the standard theme with no custom code to check everything is good, and work forward from there bit by bit with your custom code. If you’d rather revert, I can provide just the changed files for the image size fix.

– Ed

[lobsterass]

Is the standard theme the one you sent me or the one regular 1.81 one that everybody can update to in wp back end? I don’t know what to do anymore….I’m not sure I can handle this.

[lobsterass]

I’m thinking I don’t have any choice but going back to my back up 12 hours ago. I need to sleep…

[Swift Ideas – Ed]

Do what you have to do.

Here is a zip of the files that are changed to resolve the image size setup – http://d.pr/f/dB3I/WYpWzdLN

If you revert, you just need to replace those files via FTP.

– Ed

[lobsterass]

broken

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Sorry if it wasn’t clear, but those files within that folder are to transfer to the “neighborhood” folder, once you’ve restored.

– Ed

[lobsterass]

Most stuff is back now. WooCommerce looks bad though.